Home > Developer > Web Develop
Html is verified using a JQuery custom form ., Jquery form
First, let's look at my form:
Html section:
<Body> <form method = "post" action = ""> <div class = "int"> <label for = "username"> username: </label> <! -- Add required for each required element --> <input type = "text" id = "username" class = "required"/> </div> <div class = "int"> <label for = "email"> email: </label> <input type = "text" id = "email" class = "required"/> </div> <div class = "int"> <label for =" personinfo "> personal data: </label> <input type = "text" id = "personinfo"/> </div> <div class = "sub"> <input type = "submit" value =" submit "id =" send "/> <input type =" reset "id =" res "/> </div> </form> </body>Jquery section:
<Script type = "text/javascript"> // <! [CDATA [$ (function () {/** the idea is to first add a required tag for each required and implement it using the each () method. * Create an element in the each () method. Then, add the created element to the parent element through the append () method. * This describes the essence of this. Each time this corresponds to the corresponding input element, the corresponding parent element is obtained. * Then add a focus loss event to the input element. Then, verify the user name and email. * Here we use a judgment is (). If it is a user name, it will be processed accordingly. If it is an email, it will be verified accordingly. * In the jQuery framework, you can also insert original javascript code. For example, the authentication username contains this. value, and this. value. length. Determine the content. * Then, the email is verified. It seems that a regular expression is used. * Add a keyup event and a focus event to the input element. The verification is also required during keyup. You can call the blur event. TriggerHandler () trigger is used to trigger the corresponding event. * Perform unified verification when submitting the form at the end * handle the whole and details * // if required, add the Red Star logo. $ ("form: input. required "). each (function () {var $ required = $ ("<strong class = 'high'> * </strong>"); // create an element $ (this ). parent (). append ($ required); // then append it to the document}); // $ ('form: input') after the text box loses focus '). blur (function () {var $ parent = $ (this ). parent (); $ parent. find (". formtips "). remove (); // verify the username if ($ (this ). is ('# username') {if (this. value = "" | this. value. length <6) {Var errorMsg = 'enter at least 6 usernames. '; $ parent. append ('<span class = "formtips onError">' + errorMsg + '</span>');} else {var okMsg = 'the input is correct. '; $ parent. append ('<span class = "formtips onSuccess">' + okMsg + '</span>') ;}// verify the email if ($ (this ). is ('# email') {if (this. value = "" | (this. value! = ""&&! /. + @. + \. [A-zA-Z] {2, 4} $ /. test (this. value) {var errorMsg = 'enter the correct email address. '; $ parent. append ('<span class = "formtips onError">' + errorMsg + '</span>');} else {var okMsg = 'the input is correct. '; $ parent. append ('<span class = "formtips onSuccess">' + okMsg + '</span> ');}}}). keyup (function () {$ (this ). triggerHandler ("blur ");}). focus (function () {$ (this ). triggerHandler ("blur") ;}); // end blur // submit for final verification. $ ('# Send '). click (function () {$ ("form: input. required "). trigger ('blur'); var numError = $ ('form. onerror '). length; if (numError) {return false;} alert ("registration successful, the password has been sent to your mailbox, please check. ") ;}); // reset $ ('# res '). click (function () {$ (". formtips "). remove () ;};}) //]> </script>An example outside the column adds different prompts to different labels, and adds the prompt to the specified position (without damaging the table structure). Of course, you can add some small images.
<Pre name = "code" class = "java"> <script type = "text/javascript" >$ (document ). ready (function () {$ ('input '). blur (function () {var $ parent = $ (this ). parent (). parent (). next (); // The next tag of the td tag where this is located $ parent. find (". formtips "). remove (); // verify the color card number if ($ (this ). is ('# cd_ID') {if (this. value = "") {var errorMsg = 'color card number cannot be blank '; // alert ("aa"); $ parent. append ('<span class = "formtips onError">' + errorMsg + '</span>');} el Se {var okMsg = 'the input is correct. '; // $ parent. append ('<span class = "formtips onSuccess">' + okMsg + '</span>') ;}// verify the color card name if ($ (this ). is ('# cd_Name') {if (this. value = "") {var errorMsg = 'color card name cannot be blank '; $ parent. append ('<span class = "formtips onError">' + errorMsg + '</span>');} else {var okMsg = 'the input is correct. '; // $ parent. append ('<span class = "formtips onSuccess">' + okMsg + '</span>') ;}// verify the formula number if ($ (this ). is ('# rp _ Id') {if (this. value = "") {var errorMsg = 'recipe number cannot be blank '; $ parent. append ('<span class = "formtips onError">' + errorMsg + '</span>');} else {var okMsg = 'the input is correct. '; // $ parent. append ('<span class = "formtips onSuccess">' + okMsg + '</span>') ;}// verify L if ($ (this ). is ('# lab_L') {if (this. value> 100 | this. value <0 | this. value = "") {var errorMsg = 'l value range: 0 ~ 100 '; $ parent. append ('<span class = "formtips onError">' + errorMsg + '</span>');} else {var okMsg = 'the input is correct. '; // $ parent. append ('<span class = "formtips onSuccess">' + okMsg + '</span>') ;}// verify A if ($ (this ). is ('# lab_A') {if (this. value> 127 | this. value <-128 | this. value = "") {var errorMsg = 'a value range-128 ~ 127 '; $ parent. append ('<span class = "formtips onError">' + errorMsg + '</span>');} else {var okMsg = 'the input is correct. '; // $ parent. append ('<span class = "formtips onSuccess">' + okMsg + '</span>') ;}// verify B if ($ (this ). is ('# lab_ B') {if (this. value> 127 | this. value <-128 | this. value = "") {var errorMsg = 'l value range-128 ~ 127 '; $ parent. append ('<span class = "formtips onError">' + errorMsg + '</span>');} else {var okMsg = 'the input is correct. '; // $ parent. append ('<span class = "formtips onSuccess">' + okMsg + '</span>') ;}// material if ($ (this ). is ('# rp_Material') {if (this. value = "" | this. value = null) {var errorMsg = 'material cannot be null'; $ parent. append ('<span class = "formtips onError">' + errorMsg + '</span>');} else {var okMsg = 'the input is correct. '; // $ parent. append ('<span class = "formtips onSuccess">' + okMsg + '</span>') ;}// recipe source if ($ (this ). is ('# rp_Source') {if (this. value = "") {var errorMsg = 'recipe source cannot be blank '; $ parent. append ('<span class = "formtips onError">' + errorMsg + '</span>');} else {var okMsg = 'the input is correct. '; // $ parent. append ('<span class = "formtips onSuccess">' + okMsg + '</span>') ;}}); $ ('# cd_Instruction '). blur (function () {// usage $ (this ). parent (). parent (). next (). find (". formtips "). remove (); if (this. value = "") {var errorMsg = 'purpose description cannot be null'; $ (this ). parent (). parent (). next (). append ('<span class = "formtips onError">' + errorMsg + '</span>');} else {var okMsg = 'the input is correct. '; // $ parent. append ('<span class = "formtips onSuccess">' + okMsg + '</span>') ;}); $ ('# submit '). click (function () {$ ("form: input "). trigger ('blur'); var numError = $ ('form. onerror '). length; if (numError) {return false ;}}) ;}); </script>Format of the given row:
<Tr> <td> <em> * </em> <label> color card number: </label> </td> <div class = "editor-field"> @ Html. textBoxFor (model => model. cd_ID, new {@ class = "required"}) </div> </td> </tr>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
