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 相关文章推荐
jQuery实现的类flash菜单效果代码
May 17 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
Mar 25 Javascript
jQuery匹配文档链接并添加class的方法
Jun 26 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
Vue 过渡实现轮播图效果
Mar 27 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
JS实现滑动插件
Jan 15 Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 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
德生PL990的分析评价
2021/03/02 无线电
php实现天干地支计算器示例
2014/03/14 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
php数组使用规则分析
2015/02/27 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
php实现算术验证码功能
2018/12/05 PHP
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
python中反射用法实例
2015/03/27 Python
在Python程序中实现分布式进程的教程
2015/04/28 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
有创意的广告词
2014/03/18 职场文书
合作协议书怎么写
2014/04/18 职场文书
四风问题对照检查材料
2014/09/22 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
导游词之崇武古城
2019/10/07 职场文书
git stash(储藏)的用法总结
2022/06/25 Servers