jQuery Validate插件实现表单强大的验证功能


Posted in Javascript onDecember 18, 2015

jQuery Validate插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。

第一节:jQuery Validation让验证变得如此容易

一、官网下载jquery,和jquery validation plugin
二、引入文件

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

三、接下来,声明下面的HTML片段

<form action="" id="jvForm"> 
 姓名:<input type="text" name="username" id="username" class="required" /></br> 
 密码:<input type="password" name="password" id="password" class="required"/></br> 
 <input type="submit" value="提交" /> 
</form>

通过以上代码,大家会发现我们对于每一个input都加上了class="required"
他的作用就是在这个inpute标签为空时会提示用户出错。
四、最后我们要为我们的框架找到一个切入点

<script type="text/javascript"> 
 $(function() { 
  $("#jvForm").validate(); 
 }) 
</script>

运行效果如下

jQuery Validate插件实现表单强大的验证功能 

当然提示信息默认是英文的,可根据需要在jquery.validate.js里修改。

第二节:jQuery Validation让验证变得如此容易

上一个例子我们是统一引用jquery.validate.js这样所有必填字段的提示信息都将是This field is required.
现在要改成动态提示,比如姓名如果为空则提示姓名不能为空,密码如果为空则提示密码不能为空。
这次我们将校验规则写在代码里
首先还是先引入文件

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

接下来,声明下面的HTML片段

<form action="" id="jvForm"> 
 姓名:<input type="text" name="username" id="username" /></br> 
 密码:<input type="password" name="password" id="password" /></br> 
 <input type="submit" value="提交" /> 
</form>

和之前的相比没有了class="required"
最后 校验规则如下:

$(function() { 
 $("#jvForm").validate({ 
  rules: { 
   username: { 
    required: true 
   }, 
   password: { 
    required: true 
   } 
  }, 
  messages: { 
   username: { 
    required: "姓名不能为空!" 
   }, 
   password: { 
    required: "密码不能为空!" 
   } 
  } 
 }); 
})

运行效果如下

jQuery Validate插件实现表单强大的验证功能 

第三节:jQuery Validation让验证变得如此容易

以下代码进行对jQuery Validation的简单演示包括必填项、字符长度,格式验证
一、引入文件

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

二、声明HTML片段

<form action="" id="jvForm"> 
  用 户 名:<input type="text" name="username"/></br> 
  密 码:<input type="password" name="password" id="password"/></br> 
  确认密码:<input type="password" name="confirm_password"/></br> 
  出 生 地:<select name="address"><option value="">--</option><option value="1">北京</option> 
 <option value="1">上海</option><option value="1">深圳</option></select></br> 
  手 机:<input type="text" name="mobile" /></br> 
  邮 箱:<input type="text" name="email" /></br> 
  <input type="submit" value="提交" /> 
</form>

三、错误提示样式

<style type="text/css"> 
 label.error{font-size:12px;font-weight: normal;color:#ff0511;margin-left:10px;} 
</style>

四、验证代码

<script type = "text/javascript"> 
$(function() { 
 $("#jvForm").validate({ 
  rules: { 
   username: { //用户名必填 至少3位 
    required: true, 
    minlength: 3 
   }, 
   password: { //密码必填 至少6位 
    required: true, 
    minlength: 6 
   }, 
   confirm_password: { //密码确认 
    required: true, 
    equalTo: "#password" 
   }, 
   address: { //出生地必填 
    required: true 
   }, 
   mobile: { //手机必填 验证格式 
    required: true, 
    mobile: true 
   }, 
   email: { //email必填 验证格式 
    required: true, 
    email: true 
   }, 
 
  }, 
  messages: { 
   username: { 
    required: "用户名不能为空!", 
    minlength: "用户名至少三位!" 
   }, 
   password: { 
    required: "密码不能为空!", 
    minlength: "密码至少六位!" 
   }, 
   confirm_password: { 
    required: "密码确认不能为空!", 
    equalTo: "两次输入密码不一致 !" 
   }, 
   address: { 
    required: "请选择出生地!", 
   }, 
   mobile: { 
    required: "手机不能为空!", 
    mobile: "手机格式不正确", 
   }, 
   email: { 
    required: "邮箱不能为空!", 
    email: "邮箱格式不正确", 
   }, 
  } 
 }); 
}) 
</script>

因为jquery.validate.js中没有mobile验证,所以需要自己增加一个
首先找到messages 在里面添加mobile 如下:

messages: { 
 required: "This field is required.", 
 remote: "Please fix this field.", 
 email: "Please enter a valid email address.", 
 url: "Please enter a valid URL.", 
 date: "Please enter a valid date.", 
 dateISO: "Please enter a valid date (ISO).", 
 number: "Please enter a valid number.", 
 mobile: "请填写正确的手机号码.", 
 digits: "Please enter only digits.", 
 creditcard: "Please enter a valid credit card number.", 
 equalTo: "Please enter the same value again.", 
 maxlength: $.validator.format("Please enter no more than {0} characters."), 
 minlength: $.validator.format("Please enter at least {0} characters."), 
 rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."), 
 range: $.validator.format("Please enter a value between {0} and {1}."), 
 max: $.validator.format("Please enter a value less than or equal to {0}."), 
 min: $.validator.format("Please enter a value greater than or equal to {0}.") 
}

然后在methods中添加mobile的正则校验

mobile: function( value, element ) { 
 return this.optional(element) || /^1[3|4|5|8][0-9]\d{8}$/.test(value); 
}

运行效果

jQuery Validate插件实现表单强大的验证功能

以上就是为大家展示的jQuery Validate 插件为表单提供了强大的验证功能,希望大家喜欢。

Javascript 相关文章推荐
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
jQuery取消ajax请求的方法
Jun 09 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 #Javascript
学习jQuey中的return false
Dec 18 #Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 #Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 #Javascript
javascript实现保留两位小数的多种方法
Dec 18 #Javascript
原生js实现图片轮播特效
Dec 18 #Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 #Javascript
You might like
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
我的论坛源代码(一)
2006/10/09 PHP
PHP与SQL注入攻击[一]
2007/04/17 PHP
用PHP ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
Javascript基础教程之switch语句
2015/01/18 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
python使用thrift教程的方法示例
2019/03/21 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
keras K.function获取某层的输出操作
2020/06/29 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
楼面经理岗位职责范本
2014/02/18 职场文书
设备管理实施方案
2014/05/31 职场文书
卫生标语大全
2014/06/21 职场文书
大学开学感言
2015/08/01 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers