jquery.validate.js 表单验证简单用法

时间:2023-01-28 21:09:14

引入jquery.validate.js插件以及Jquery,在最后加上这个插件的方法名来引用。$('form').validate();

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery.validate.js的简单用法</title>
</head>
<body>
<form action="">
<p>用户名:<input class="required" type="text" minlength="3" name="user" />(*)</p>
<p>电子邮件:<input class="required email" type="text" name="email" />(*)</p>
<p>网址:<input class="url" type="text" name="url" /></p>
<p><input type="submit" value="提交" /></p>
</form>
</body>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('form').validate();
})
</script>
</html>

像以上class中的类名,required是字段不能为空;email是需要符合邮件格式;url是需要符合网址格式(必须带http://),后边minlength是需要输入最少字符,还有挺多参数,详情请看其文档。

二、当然以上是使用的控件方式去验证的,也可以使用JS 对象 键值对传参方式来设置:(上边表单里就不用再写class,直接用name来传值即可)


<form action="">
<p>用户名:<input name="user" />(*)</p>
<p>电子邮件:<input type="text" name="email" />(*)</p>
<p>网址:<input type="text" name="url" /></p>
<p><input type="submit" value="提交" /></p>
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#reg').validate({
rules:{
user:{
required:true,
minlength:2,
},
email:{
email:true,
},
url:{
required:true;
}
},
messages:{
user:{
required:'账号不得为空',
minlength:'账号不得小于2位',
},
},
});
})
</script>

结合默认验证规则

jquery.validate.js 表单验证简单用法

jquery.validate.js 表单验证简单用法

此插件下载路径:链接: https://pan.baidu.com/s/1o8wcmkq   密码: grdp

二、如果你用了bootstrap框架,那么你可以用bootstrapValidator表单验证插件,更建议用这个哟~具体请查看:(链接转自)http://www.cnblogs.com/v-weiwang/p/4834672.html?ptvd