jquery Form Verification plug-in usage and instance

Last Update:2017-01-13 Source: Internet

Author: User

Tags extend php tutorial

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title></title>

<script>

Jquery.extend ({

Options: {

Ctrls: [],//controls to check

Success:function () {return;},//when check success,you can do Something,such as submit a AJAX request

Failed:function (msg, id) {jquery.clewmsg (msg, id);}//when Check Faild

},

Clewmsg:function (msg, id) {

Alert (msg);

},

Checkform:function (o) {

o = Jquery.extend ({},jquery.options,o);

var isok = http://www.111cn.net/wy/jquery/true;

var flashprompt = function (CTR) {

var i = 0;

var intervalid = setinterval (function () {

jquery ("#" +ctr.id). Toggleclass (' warning ');

if (i++ > 2) {

Clearinterval (Intervalid);

jquery ("#" +ctr.id). addclass (' warning ');

}

}, 100);

};

Check failed, we alert a message, and change the control ' s style

var fail = function (CTR) {

isOK = false;

O.failed (ctr.msg, ctr.id);

Flashprompt (CTR);

jquery ("#" +ctr.id). focus ();

return false;

}

Check success, we change the control to its original style

var succ = function (CTR) {

jquery ("#" +ctr.id). Removeclass (' warning ');

return http://www.111cn.net/wy/jquery/true;

}

Regular Express Check

var checkregularexpression = function (val, expression) {

if (Val!= "")

{

var Matcharray = val.match (expression);

if (Matcharray = null) return false;else return http://www.111cn.net/wy/jquery/true;

}

else return http://www.111cn.net/wy/jquery/true;

}

Jquery.each (O.ctrls, function (i, CTR) {

Switch (ctr.type)

{

Case "Mustinput": if (jquery ("#" +ctr.id). val () = "") Return fail (CTR); else return succ (CTR);

Case "Mustmorethan": if (jquery ("#" +ctr.id). Val (). length < Ctr.par) return fail (CTR); else return succ (CTR);

Case "Mustlessthan": if (jquery ("#" +ctr.id). Val (). length > Ctr.par) return Fail (CTR); else return succ (CTR);

Case "Mustequalto": if (jquery ("#" +ctr.id). Val ()!= jquery ("#" +ctr.par). Val ()) return fail (CTR);

Case "Mustemail": if (!checkregularexpression) (jquery ("#" +ctr.id). Val (),/w+ ([-+.] w+) *@w+ ([-.] w+) *.w+ ([-.] w+)) return Fail (CTR), Else return succ (CTR);

Case "Mustint": if (!checkregularexpression (jquery ("#" +ctr.id). Val (),/^[0-9]*jquery/)] return fail (CTR); SUCC (CTR);

Case "Mustfloat": if (!checkregularexpression) (jquery ("#" +ctr.id). Val (),/^[0-9]+.{ 0,1}[0-9]{0,2}jquery/)) return Fail (CTR), Else return succ (CTR);

Case "Mustselect": if (jquery ("#" +ctr.id). val () = = Ctr.par) return fail (CTR); else return succ (CTR);

Case "MustCheck": if (!jquery ("#" +ctr.id), attr ("checked")) return fail (CTR); else return succ (CTR);

Case "Mustradio": if (jquery ("Input[type= ' Radio '][name= '" +ctr.id+ "']:checked '), length<1) return fail (CTR); else return succ (CTR);

Case "Mustregular": if (!checkregularexpression (jquery ("#" +ctr.id). Val (), Ctr.par)) return fail (CTR); else return succ ( CTR);

}

});

if (isOK) o.success ();

}

});

</script>

<body>

<form id= "Form1" runat= "Server" >

<div>

<div id= "divmsg" style= border-right:deeps course kyblue thin; Display:none; margin:0; padding:0; Border-top:deepskyblue thin solid;

Border-left:deepskyblue thin solid; width:452px; Color: #3300ff; Border-bottom:deepskyblue thin solid;

Height:27px ">

</div>

<table style= "width:455px" >

<tr>

&LT;TD colspan= "2" >

Jion to Us</td>

</tr>

<tr>

<td>

Username:&nbsp;</td>

<td>

<input id= "txtUserName" type= "text"/></td>

</tr>

<tr>

<td>

Password:</td>

<td>

<input id= "txtpassword" type= "password"/></td>

</tr>

<tr>

<td>

And once again?&nbsp;

<br/>

</td>

<td>

<input id= "Txtpasswordagain" type= "text"/></td>

</tr>

<tr>

<td>

And your sex?</td>

<td>

<input id= "Radio1" type= "Radio" name= "Rdosex"/>

Man

<input id= "Radio2" type= "Radio" name= "Rdosex"/>

Female </td>

</tr>

<tr>

<td>

Your telephone:</td>

<td>

<input id= "Txttelephone" type= "text"/></td>

</tr>

<tr>

<td>

Your email:</td>

<td>

<input id= "Txtemail" type= "text"/></td>

</tr>

<tr>

<td>

Your age:</td>

<td>

<input id= "Txtage" type= "text"/></td>

</tr>

<tr>

<td>

Your weight:</td>

<td>

<input id= "Txtweight" type= "text"/></td>

</tr>

<tr>

<td>

Country:</td>

<td>

<select id= "Selcountry" >

<option value= "0" >select</option>

<option value= "1" > China </option>

<option value= "2" > USA </option>

<option value= "3" > UK </option>

</select>

</td>

</tr>

<tr>

<td>

Remark:</td>

<td>

<textarea id= "Txtremark" cols= "rows=" 2 "></textarea></td>

</tr>

<tr>

<td>

</td>

<td>

<input id= "Chkagree" type= "checkbox"/>i agree all the terms.</td>

</tr>

<tr>

<td>

</td>

<td>

<input id= "button1" type= "button" value= "Check form" onclick= "Checkform ()"/></td>

</tr>

</table>

</div>

</form>

Rule description: Required:http://www.111cn.net/wy/jquery/true must fill in

MinLength: Minimum Length

MaxLength: Maximum length

Rangelength: [3,10] string between 3 and {1}

RANGE:[100,1000] can only be a value between 100 and 1000.

Min: Minimum value

Max: Max value

Email:http://www.111cn.net/wy/jquery/true Verify Mailbox

Url:http://www.111cn.net/wy/jquery/true Verify that the URL is valid

Date:http://www.111cn.net/wy/jquery/true Verify is valid date new date () type format

Dateiso:http://www.111cn.net/wy/jquery/true Verify is valid date year/month/day or year-month-day format

Number:http://www.111cn.net/wy/jquery/true Verify that the number is valid

Digits:http://www.111cn.net/wy/jquery/true validation is an integer

CreditCard: Verify the legal credit card number

Equalto: "To match the elements" such as: ' #cnfpass ', verify that two input values are the same

Accept: "Gif|png|jpg" verifies if the string is a legal suffix name

Remote: ' URL ' remotely verify that the value entered is valid URL is returned http://www.111cn.net/wy/jquery/true validation succeeded, false validation failed

These are the validation rules provided in the plug-in, and the Plug-ins provide a way to add rules to add some of our own rules, such as:

Jquery.validator.addmethod ("rule name", function (value, element, params) {return this.optional (Element) | | Verify Value}

b) Using the Jquery.validate Validate method to validate

<script> $ (function () {  $ (' #frm '). Validate ({  rules:{  username:{  required:http:// www.111cn.net/wy/jquery/true,  minlength:4,  Remote: ' check_username.php tutorial '  },  password:{   required:http://www.111cn.net/wy/jquery/true,  minlength:6,  equalto: ' #cnfpass '  },  cnfpass:{  required:http://www.111cn.net/wy/jquery/true } },  messages:{  username:{   Required: ' Required ',  minlength: ' Minimum length 3 ',  remote: ' already exists '  },  password:{  required: ' Required ',   minlength: ' Minimum length 6 ',  equalto: ' Two input passwords inconsistent '  },  cnfpass:{  required: ' Required '  } },   Submithandler:function (form) {   form.submit ()/Note this place cannot use $ (from) .submit } })  })   </script> <form name= "frm" id= "frm" method= "post" action= "" > <input type= "text" name= "username" > <input type= "text" name= "password" > <input type= "text" name= "Cnfpass" > <input tyPe= "Sumbit" value= "Submit" > </form>

Let's take a look at the jquery Checkform plug-in simple usage

$ (function () {

$ ("form"). Valid ([

Validation selection

{Name: ' checkbox ', simple: ' Multiple selections '},

Verify required, as long as it is not empty

{Name: ' username ', simple: ' username '},

Non-required, mailbox type

{Name: "email", type: "Mail", Simple: "Mailbox", Require:false}

]);

})

</body>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More