jQuery插件之validation插件

2020-05-24 21:27:59易采站长站整理

remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值
email:true 必须输入正确格式的电子邮件
url:true 必须输入正确格式的网址
date:true 必须输入正确格式的日期,内部调用Date.parse()方法进行校验
dateISO:true 必须输入正确格式的日期(ISO),如:2009-06-23,1998/01/22
number:true 必须输入合法的数字(负数,小数)
digits:true 必须输入整数
creditcard: 必须输入合法的信用卡号
equalTo:"#field" 输入值必须和 #field 相同
accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)
minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)
rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)
range:[5,10] 输入值必须介于 5 和 10 之间
max:5 输入值不能大于 5
min:10 输入值不能小于 10

下面使用一个更详细的例子,对上面的17个规则进行应用


<form id="demoForm">
<p>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"/>
</p>
<p>
<label for="password">密码:</label>
<input type="password" id="password" name="password"/>
</p>
<p>
<label for="confirm-password">确认密码</label>
<input type="password" id="confirm-password" name="confirm-password"/>
</p>
<p>
<label for="email">电子邮件:</label>
<input id="email" name="email"/>
</p>
<p>
<label for="url">网址:</label>
<input id="url" name="url"/>
</p>
<p>
<label for="date">生日:</label>
<input id="date" name="date"/>
</p>
<p>
<label for="num">随机数(0-9):</label>
<input id="num" name="num"/>
</p>
<p>
<label for="card">信用卡号:</label>
<input id="card" name="card"/>
</p>
<p>
<input type="submit" value="登录"/>
</p>
</form>
<script>
$('#demoForm').validate({
rules:{
username:{
required: true,
maxlength: 10
},
password:{
required: true,
range:[5,10] },
'confirm-password':{
equalTo: "#password"
},
email:{
email:true
},
url:{
url:true
},
date:{
dateISO:true
},
num:{
min:0,
max:9
},
card:{
creditcard:true
}