validate的使用

来源：互联网发布：知乎陈毅编辑：程序博客网时间：2024/05/16 17:41

validate是jQuery插件，必须在jQuery的基础上进行运行, 使用之前需要导入jQuery库、validate库、和国际化资源库

校验方式：
语法：$(…).validate({
rules:{},
messages:{}
})

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>

<script type="text/javascript" src="../js/jquery.validate.js" ></script>
<script type="text/javascript" src="../js/messages_zh.js" ></script>
<script>
/*页面加载成功后选中要校验的表单对象*/
$(function(){
//选中要校验的表单对象，调用插件的validate函数
$("#formId").validate({
//校验规则
rules:{
username:"required",
password:{
required:true,
number:true
},
repassword:{
required:true,
equalTo:"[name='password']"
},
zuixiaozhi:{
required:true,
min:5
},
shuzhiqujian:{
required:true,
range:[4,40]
},
card:{
required:true,
cardLength:true
}
},
//校验规则
messages:{
username:"用户名不可为空",
password:{
required:"密码不可为空",
number:"密码格式不正确"
},
zuixiaozhi:{
min:"请输入不小于0的值"
},
shuzhiqujian:{
range:"请输入0到1之间的值"
}
}
});
});
</script>
</head>
<body>
<form id="formId" action="">
必填：<input type="text" name="username" /> <br/> 必填数字：
<input type="text" name="password" /> <br /> 必填重复：
<input type="text" name="repassword" /> <br /> 最小值：
<input type="text" name="zuixiaozhi" /> <br /> 区间：
<input type="text" name="shuzhiqujian" /> <br />
<input type="submit" value="提交" />
</form>
</body>
</html>

阅读全文

0 0