所需要的插件下载地址见文章末
步骤：
- 首先项目中引入需要的.js文件
jquery-3.3.1.min.js
jquery.validate.min.js
<!--根据自己项目的包结构考虑 -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
- 书写一个简单的form表单（测试前的准备）
<body>
<hr/><p>
<form id="ff" action="aa" method="post">
用户名：<input type="text" id="name" name="user.username"/><br>
密码：<input type="text" id="pwd" name="password"/><br>
邮箱：<input type="text" id="email" name="email" /><br>
手机号：<input type="text" id="phone" name="phone"/><br>
<input type="submit" value="提交"/>
</form>
</body>- 使用
<script>
$(function(){
//扩展默认验证规则
//手机号
$.validator.addMethod("mobile",function(value,element,param){
var reg =/^1[34578]\d{9}$/;//正则表达式验证
return reg.test(value);
},"请输入正确的手机号");
//邮箱
$.validator.addMethod("mail",function(value,element,param){
var em = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return em.test(value);
},"请输入正确的邮箱格式");
//表单验证
$("#ff").validate({
//验证规则
rules:{//name属性
"user.username":"required",
password:"required",
phone:"mobile",
email:"mail"
},
//不通过时提示信息
messages:{
"user.username":"用户名不能为空！",
password:"密码不能为空！",
}
});
});
</script>
<!-- 提示信息添加样式 -->
<style>
label.error{
color:red;
}
</style>
这只是对 jquery-validation插件最简单的操作。想了解更多参考对应的文档学习吧
插件下载地址：https://download.csdn.net/download/right_hou/10933045
备注：如果无法下载请留言。官网也可以下载
161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
