【精品】前端验证框架：jquery-validate.js

简介

jquery.validate.js是我们经常用到的form表单验证插件，可以很方便的帮我们进行表单验证。

官网：https://bassistance.de/jquery-plugins/jquery-plugin-validation

校验规则

规则	说明
required:true	必输字段
remote:“check.php”	使用ajax方法调用check.php验证输入值
email:true	必须输入正确格式的电子邮件
url:true	必须输入正确格式的网址
date:true	必须输入正确格式的日期日期校验ie6出错，慎用
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

使用步骤

引入jquery.min.js
引入 jquery.validate.js
页面加载后对表单进行验证 $(“#表单id名”).validate({}）
在validate中的rules中编写验证规则，比如：
- 字段的name属性:"校验器:（一个输入框只有一个校验器的时候使用）
- 字段的name属性:{校验器:值,校验器:值} (输入框需要有多个校验器的时候使用)
在validate中的messages中编写提示信息(格式与rules相对应)
在validate中的submitHandler中编写验证通过执行的内容
表单使用input type="submit"提交

使用

将校验规则写到控件中

<script src="js/jquery-validate/jquery.js"></script>
<script src="js/jquery-validate/jquery.validate.js"></script>
<script src="js/jquery-validate/messages_zh.js"></script><form action="admin" method="post" id="loginForm"><input type="text" name="account" required minlength="4"> <br><input type="password" name="password" required minlength="4"> <br><input type="submit" value="登录">
</form><script type="text/javascript">$(function (){$("#loginForm").validate();});
</script>

将校验规则写到js代码中

<script src="js/jquery-validate/jquery.validate.js"></script>
<script src="js/jquery-validate/jquery.validate.js"></script>
<script src="js/jquery-validate/messages_zh.js"></script><form action="user" method="post" enctype="multipart/form-data" id="userAddForm">姓名：<input name="nickname" type="text"> <br>用户头像：<input type="file" name="avatar"><br>性别：<input checked="checked" name="gender" type="radio" value="1">男<input name="gender" type="radio" value="0">女    <br>邮件：<input id="email" name="email" type="text"> <br>电话：<input id="tel" name="tel" type="text">QQ：<input name="qq" type="text"> <br>微信：<input name="wechat" type="text"> <br>积分：<input name="credits" type="text"> <br>简介：<input name="intro" type="text"> <br>验证码：<input name="verifyCode" type="text"><img alt="验证码" onClick="this.src=this.src+'?'+Math.random();" src="verifyCode"><br><input id="submitBtn" type="submit" value="提交">
</form><script>$(function () {$("#userAddForm").validate({rules: {nickname: {required: true,minLength: 4},avatar: "required",email: {required: true,email: true},QQ: {required: true,minLength: 5},wechat: "required",credits: {required: true,digits: true},verifyCode:"required"},messages:{nickname: "请输入用户名",avatar:"请选择头像",email:"邮箱必须正确填写",QQ:"QQ不能为空且长度必须大于等于5",wechat: "微信不能为空",credits: "积分不能为空且必须为整数",verifyCode: "验证码不能为空",}})});
</script>

注：如果某个控件没有message，将调用默认的信息

示例：自定义提示信息，错误提示位置以及颜色

页面代码

<html>
<body><form id="loginForm" method="post" action=""><h2>会员登录</h2><h3>用户名</h3><input class="name" id="account" name="account" type="text" required minLength="6"/><div style="color: red;"><label for="account" class="error"></label></div><h3>密码</h3><input class="pwd" id="password" name="password" type="password"  required minLength="6"/><div style="color: red;"><label for="password" class="error"></label></div><div class="zhuangtai"><input checked="checked" type="checkbox"/> 下次自动登录</div><div class="subs"><input class="submit" src="http://127.0.0.1:9005/wego-simple/sys/frontend/sub.jpg" type="image"/></div></form><script type="text/javascript" src="/frontend/js/jquery"></script><script type="text/javascript" src="/frontend/js/jquery.validate.js"></script><script type="text/javascript">$(function () {$("#loginForm").validate({messages: {account: "用户名不能小于六位，请重新输入！",password: "密码不能小于六位，请重新输入！",}})});</script>
</body>
</html>

效果

综合示例

<html lang="en">
<head><meta charset="utf-8"><script src="./jquery-3.1.1.js"></script><script src="./jquery.validate.js"></script>
</head>
<body>
<div id="main"><form class="cmxform" id="signupForm" method="get" action=""><p><label for="name">用户名</label><input id="name" name="name" type="text"></p><p><label for="password">密码</label><input id="password" name="password" type="password"></p><p><label for="confirm_password">确认密码</label><input id="confirm_password" name="confirm_password" type="password"></p><p><label for="email">邮箱</label><input id="email" name="email" type="email"></p><p><label for="agree">协议</label><input type="checkbox" class="checkbox" id="agree" name="agree"></p><p><input class="submit" type="submit" value="Submit"></p></form><script>$(function () {$("#signupForm").validate({rules: {name: "required",password: {required: true,minlength: 5},confirm_password: {required: true,minlength: 5,equalTo: "#password"},email: {required: true,email: true},agree: "required"},messages: {name: "请输入名字",password: {required: "请输入密码",minlength: "密码至少5个字符"},confirm_password: {required: "请输入密码",minlength: "密码至少5个字符",equalTo: "密码必须和上面的一致"},email: "请输入有效的邮件地址",agree: "请接受协议"}});});</script>
</div>
</body>
</html>

效果

【精品】前端验证框架：jquery-validate.js相关推荐

验证插件——jquery.validate.js
下载地址:http://download.csdn.net/download/s592652578/9457421 教程:http://www.runoob.com/jquery/jquery-plu ...
jQuery验证控件jquery.validate.js使用说明+中文API
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明转载 ...
当同时使用bootstrap-datepicker.js和jquery.validate.js这两款插件，至少要选择两次时间，才能验证成功的问题...
当用 bootstrap-datepicker.js 这个插件选择时间,再用jquery.validate.js进行验证,当时间不为空时则验证通过.可能由于在时间插件弹出来时,input框的值发生改变 ...
element-UI框架使用validate.js的form校验规则（+自定义验证代码）- 应用篇
文章目录 element-UI除了官方给出的校验规则,还可以自定义(举例如下) 代码示例: 参考文章: element-UI除了官方给出的校验规则,还可以自定义(举例如下) element-UI框架f ...
jQuery表单校验jquery.validate.js的使用
jQuery是一个快速.简洁的js库,为网站的快速开发简化了HTML文档遍历,事件处理,动画,以及Ajax交互.使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅 ...
jquery.validate.js插件的使用方法
近期做项目.须要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习. [样例例如以下] 1.前台页面 <form id="form1" ...
ASP.NETmvc常用JQUERY收藏【jquery.form.js结合jquery.validate.js】
虽然jquery.form.js可以通过自定义验证方式实现个性化的验证,不过我们大量使用的还不是一个红星(*) 在jquery.form.js下使用jquery.validate.js就可以简简单单的 ...
修改 jquery.validate.js 支持非form标签
尝试使用markdown来写一篇blog,啦啦啦源代码传送门:github 在特殊情况下我们使用jquery.validate.js对用户输入的内容做验证的时候,表单并不是一定包含在form之中,有 ...
jquery.validate.js 详解
jquery下载地址:https://jquery.com/download/ jquery.validate.js下载地址:https://cdnjs.com/libraries/jquery-va ...

【精品】前端验证框架：jquery-validate.js

简介

校验规则

使用步骤

使用

将校验规则写到控件中

将校验规则写到js代码中

示例：自定义提示信息，错误提示位置以及颜色

页面代码

效果

综合示例

【精品】前端验证框架：jquery-validate.js相关推荐

最新文章

热门文章