input type="password" name="password" id="password" required="...网站的技术不断变化,基本上是围绕着html、css、js为中心进行变化,UI上主要是考虑PC端与移动端的适应,在服务架构上主要是考虑流量与容客量。" />

做网站-表单验证JS插件validator

jQuery.validator是一款非常不错的表单验证插件,验证方式非常简单方便


一、在元素的class属性中添加需要验证的规则,多个规则以空格隔开

<label>邮箱:</label><input class="required email" type="text" name="email">

required: // 必填
email: // 邮箱地址
url: // url地址
date: // 日期
dateISO: // ISO格式的日期(2014/08/27 或 2014-08-27)
number: // 数字(负数,正数,小数,整数)
digits: // 正整数
creditcard: // 信用卡


二、将要验证的规则作为元素的属性

<label for="userName">用户名:</label>
<input
name="userName"
id="userName"
required
remote="ajax requestUrl"
>
<label for="password1">密码:</label>
<input
type="password"
name="password1"
id="password1"
required
rangelength="6,12"
>
<label for="password2">请再次输入密码:</label>
<input
type="password"
name="password2"
id="password2"
required
equalTo="#password1"
>
required:        // 必填
email:           // 邮箱地址
url:             // url地址
date:            // 日期
dateISO:         // ISO格式的日期(2014/08/27 或 2014-08-27)
number:          // 数字(负数,正数,小数,整数)
digits:          // 正整数
creditcard:      // 信用卡// 注意,在元素上将规则作为元素的属性,除了 required ,以上规则都需要赋值,如:
minlength:       // 输入字符最小长度(中文算一个字符)
maxlength:       // 输入字符最大长度(中文算一个字符)
rangelength:     // 输入字符最小,最大长度(中文算一个字符)
min:             // 数值最小值
max:             // 数值最大值
range:           // 数值最小,最大值
equalTo:         // 再次输入相同的值
remote:          // 发送ajax请求验证(常用案例就是在注册时,验证用户名是否存在),                 // 注:请求返回的 response === true || response === 'true',才算验证通过,这需要后端的配合

jQuery.validator内部做了很多处理,下面写法都是可以的

<input 
type="password"
name="password1"
id="password1"
required
rangelength="6,12"
>

<input
type="password"
name="password1"
id="password1"
required=""
rangelength="6, 12"
>

<input
type="password"
name="password1"
id="password1"
required
rangelength="6 12"
>

<input
type="password"
name="password1"
id="password1"
required="true"
rangelength="[6,12]"
>

同时还支持HTML5的type属性

<input 
type="url"
name="url"
required>

<input
type="number"
name="number"
required>

<input
type="email"
name="email"
required>

注意:不支持 type="range" 的 input 控件,这是因为需要比较最大,最小值,而不只是简单的正则验证


四、在配置对象中,传递要验证的规则

<form id="validForm">
    <input type="text" name="userName">
    <input type="text" name="email">
    <input type="submit" value="提交">
</form>
 $('#validForm').validate({
// 每一个name值对应一组规则 userName: {    required: true,    rangelength: [4,10],    remote: ''    // ajax请求地址 }, email: {    required: true,    email: true }});

五、自定义验证规则

使用 $.validator.addMethod( name, method, message ), 便可以添加自定义规则
如:我要自定义一条验证手机号码的规则:

$.validator.addMethod('mobile', function( value, element ){

    // /^1\d{10}$/ 来自支付宝的正则
    return this.optional( element ) || /^1\d{10}$/.test( value );}, '请输入正确的手机号码');

六、其他( 处理频繁请求ajax的操作 )

情景1:关注与取消关注,这种需求需要处理连续 多个ajax请求的关系
我之前的处理是上一个ajax请求完毕了,才去响应用户的下一次单击操作,即再次发送ajax请求

情景2:jQuery.validator源码中的例子
如果验证规则是 remote ,发送ajax请求验证,由于插件在keyUp事件中会触发验证,那么当keyUp频繁的触发,ajax就会请求很多很多次啦,这就涉及到处理连续多个ajax请求的问题,
即:上一次ajax请求还没完成,紧接着又发送ajax请求,这样是不是有点凌乱呢,jQuery.validator是这样做的,将上一次未响应的ajax请求中断,这样只会在最后一次keyUp事件中发送ajax验证
比较:想想情景1的例子,第二种处理方式更好,因为情景1的处理,可能会在最后一次单击事件无响应,不会触发ajax请求,造成用户体验不好,这是因为在最后一次单击事件中,上一次ajax请求还未完成(响应)



PS:

jQuery.validator有四种为表单控件添加验证规则的方式,其内部实现是按 class, attribute, jQuery.fn.data, 配置对象依次叠加的,后面途径添加的规则会覆盖前面添加的规则;
如果有多个表单控件的name属性值相同(属性值包含''),除第一个表单控件会验证,后面name属性值相同的表单控件验证将会忽略;


往期热点文章:

   

      # BrowserSync-浏览器同步测试工具

      # 做网站-第三方微信登录

      # Http中GET和POST请求的区别

      # http请求生命周期流程

      # Redis的安装与配置

      # 做网站-Http状态码详解

      # crontab定时任务语法及应用

      # MySQL中MyISAM与InnoDB区别及选择

做网站公众平台(zwangz888)每天为您分享原创Web开发资讯,开发经验,为您的技能充电。期待您的关注与分享,同时欢迎您留言,让我们每天进步一点点!

一个好的响应式网站需要具备什么条件?

无论你是找建站公司来制作网站,还是自己进行开发,一个响应式网站不单单要外表好看,最主要是要适应性好。

做有活力的网站?超实用网页动画指南值得收藏 | 分享

现如今,动画对于网页设计师已经不再新奇,它正在成为最基础的交互设计效果。动画就是变化,是一种运动。下面就来跟范儿姐一起来了解一下网页动画吧~01网页动画简史正所谓,了解一件事物,就

写给新人:线上B2C电商网站架构解析

线下的实体零售店的运营大家都会接触到,我将自己理解的一些归纳为以下几个环节,大家可以回复补充:货源:传统门店是厂商业务员线下走访铺设销售点,或者卖家寻找可靠厂商获取售卖资格选址。

架构设计:标准Web系统的架构分层

例如:一些简单的CRM系统可能在产品初期并不需要K-V作为缓存;一些系统访问量不大,并且可能只有一台业务服务器存在,所以不需要运用负载均衡层。

推荐几个优秀的国外网页设计模板网站

1、POFOPOFO地址:http://www.themezaa.com/html/pofo/index.html这个网站的模板搭配都很特别,欧美风十足,里面的模板高端大气,很适合