jquery Self-made forms Real-time verification

<span id="Label3"></p><p><p><span style="white-space:pre"></span><span style="font-size:18px">About jquery form validation, Here is a simple example, a general idea to share.</span></p></p><p><p><span style="font-size:18px">First get the page data, and then to determine the elements of the page, if the error, just add a hint below the Div.</span></p></p><p><span style="font-size:18px">The $ ("input") is used here. blur to trigger the checksum, of course, if it's more canonical, you can use it.<span style="background-color:rgb(255,255,255)"><span style="font-family:Times New Roman; color:#323e32; word-wrap:normal; word-break:normal; line-height:21px; font-style:normal; font-variant:normal; font-weight:normal; letter-spacing:normal; text-align:left; text-indent:28px; text-transform:none; white-space:normal; word-spacing:0px"><span style="font-family:Times New Roman; color:#323e32; word-wrap:normal; word-break:normal; line-height:21px; font-style:normal; font-variant:normal; font-weight:normal; letter-spacing:normal; text-align:left; text-indent:28px; text-transform:none; white-space:normal; word-spacing:0px">Blur</span></span><span style="font-family:宋体; color:#323e32; word-wrap:normal; word-break:normal; line-height:21px; font-style:normal; font-variant:normal; font-weight:normal; letter-spacing:normal; text-align:left; text-indent:28px; text-transform:none; white-space:normal; word-spacing:0px"><span style="font-family:宋体; color:#323e32; word-wrap:normal; word-break:normal; line-height:21px; font-style:normal; font-variant:normal; font-weight:normal; letter-spacing:normal; text-align:left; text-indent:28px; text-transform:none; white-space:normal; word-spacing:0px">and the</span></span><span style="font-family:Times New Roman; color:#323e32; word-wrap:normal; word-break:normal; line-height:21px; font-style:normal; font-variant:normal; font-weight:normal; letter-spacing:normal; text-align:left; text-indent:28px; text-transform:none; white-space:normal; word-spacing:0px"><span style="font-family:Times New Roman; color:#323e32; word-wrap:normal; word-break:normal; line-height:21px; font-style:normal; font-variant:normal; font-weight:normal; letter-spacing:normal; text-align:left; text-indent:28px; text-transform:none; white-space:normal; word-spacing:0px">KeyUp</span></span><span style="font-family:宋体; color:#323e32; word-wrap:normal; word-break:normal; line-height:21px; font-style:normal; font-variant:normal; font-weight:normal; letter-spacing:normal; text-align:left; text-indent:28px; text-transform:none; white-space:normal; word-spacing:0px"><span style="font-family:宋体; color:#323e32; word-wrap:normal; word-break:normal; line-height:21px; font-style:normal; font-variant:normal; font-weight:normal; letter-spacing:normal; text-align:left; text-indent:28px; text-transform:none; white-space:normal; word-spacing:0px">time to trigger the validation rule. </span></span></span></span></p><p><p><span style="font-size:18px"><span style="background-color:rgb(255,255,255)"><span style="font-family:宋体; color:#323e32; word-wrap:normal; word-break:normal; line-height:21px; font-style:normal; font-variant:normal; font-weight:normal; letter-spacing:normal; text-align:left; text-indent:28px; text-transform:none; white-space:normal; word-spacing:0px">And here is the use of HTML custom tags, so that users do not have to write tedious expression of JS authentication, only need to use the HTML page custom tags. finally, when I click the Submit button, I will determine if there is a message in the page to control the Submission. Of course, This is just a very simple small example, will be gradually optimized.</span></span></span></p></p><p><p><span style="font-size:18px"><span style="background-color:rgb(255,255,255)"><span style="font-family:宋体; color:#323e32; word-wrap:normal; word-break:normal; line-height:21px; font-style:normal; font-variant:normal; font-weight:normal; letter-spacing:normal; text-align:left; text-indent:28px; text-transform:none; white-space:normal; word-spacing:0px">Here first the JS code</span></span></span></p></p><p><p> <span style="font-size:18px"><span style="background-color:rgb (255,255,255)"><span style="font-family: song body; Color: #323e32; word-wrap:normal; word-break:normal; line-height:21px; font-style:normal; font-variant:normal; font-weight:normal; letter-spacing:normal; text-align:left; text-indent:28px; text-transform:none; white-space:normal; word-spacing:0px "> </span> </span> </span> </p></p><pre code_snippet_id="1816589" snippet_file_name="blog_20160808_1_2570012" name="code" class="javascript">$ (document). Ready (function () {$ ("input"). Focus (function () {}); $ ("input"). Blur (function () {var Value=this.value;//get The value of the text box var id=this.id; Get the ID of the text box var vname=$ ("#" +this.id). attr ("vname"); Verify the label var regular=$ ("#" +this.id). attr ("regular"); Custom validation var errmsg=$ ("#" +this.id). attr ("errmsg"); Hint information var fid= "f" +id; var flag=true; If (isEmpty (value)) {msg=vname+ "cannot be empty!";} else {$ ("#" +fid). Remove (); If (isEmpty (regular)) {return; } var re=eval (regular); Escaped into the regular expression if (re.test (value)) {flag=false; }else{msg=errmsg; }} if (flag) {var fidv=$ ("#" +fid); If (fidv.length!=1) $ ("#" +id). after ("<font class=\" style1\ "id=" +fid+ ">" +msg+ "</font>"); } }); }); function IsEmpty (value) {         if (undefined==value| | value== "" | | Value==null) {             return true;          }else{    &NBSP;&NBSP;&NBsp      return false;         }     };</pre><br>CSS is very simple, is marked red a bit<p><p></p></p><p><p><span style="font-size:18px"></span></p></p><pre code_snippet_id="1816589" snippet_file_name="blog_20160808_2_1380749" name="code" class="css"><pre code_snippet_id="1816589" snippet_file_name="blog_20160808_2_1380749" name="code" class="css"><style type= "text/css" >.style1 {color: #FF0000}</style></pre></pre>Html<p><p></p></p><p><p><span style="font-size:18px"></span></p></p><pre code_snippet_id="1816589" snippet_file_name="blog_20160808_3_7858738" name="code" class="html"><div class= "row" id= "registerdiv" ><div class= "col-sm-12 pl0 pr0 whitecolor mt30 pb20 mb30" >