zoukankan      html  css  js  c++  java
  • jQuery formValidator 表单校验插件4.1.1高仿网易邮箱注册页面(已发演示链接)

    【密码强度校验】实现了,集成在插件里。

    现在跟126邮箱注册一摸一样!


    官方网址http://www.yhuan.com

    插件新增功能:

    1、增加输入框设置默认值,formValidator函数增加onShowText(字符串,默认值为空)和onShowTextColor(字符串数组,默认值为["#999999","#000000"])两个属性。详见demo8里的“你的描述”控件
    默认字体为灰色,获取焦点后录入的文字是黑色的。
    范例:
    $("#ms").formValidator({onShowFixText:"",onShowText:"这家伙很懒,什么都没有留下。",ajax:true,onShow:"请输入你的描述",onFocus:"描述至少要输入10个汉字或20个字符",onCorrect:"恭喜你,你输对了",defaultValue:"这家伙很懒,什么都没有留下。"}).inputValidator({min:20,onError:"你输入的描述长度不正确,请确认"});

    2、为initConfig增加mode属性,统一显示模式设置。去掉tidyMode属性
    目前支持固定提示层(FixTip)、自动构建提示层(AutoTip)、单个提示层跟随(SingleTip)、弹出提示内容(AlertTip)4种模式

    3、增强固定提示层显示效果,增加一直显示的提示层。
    为formValidator函数增加属性onShowFixText(固定提示内容),皮肤目录js中增加变量onMouseOutFixTextHtml(鼠标在控件外时,固定提示内容的html代码)、onMouseInFixTextHtml(鼠标在控件内时,固定提示内容的html代码):加onShow状态提示内容固定显示的模式。详见demo8
    样子类似于:http://reg.email.163.com/mailregAll/reg0.jsp?from=126mail
    范例:
    $("#email").formValidator({onShowFixText:"6~18个字符,包括字母、数字、下划线,以字母开头,字母或数字结尾",onShow:"请输入邮箱"....});

    4、提供校验函数passwordValidator函数,参数如下所示
    1、是否可以连续字符
    2、是否所有的字符都可以相同
    3、是否跟指定控件ID相同(例如:用户名)


    126邮箱注册地址:http://reg.email.163.com/mailregAll/reg0.jsp?from=126mail


    校验成功后,要显示的文字
    var passwordStrengthText = ['密码强度:弱','密码强度:中','密码强度:强']

    密码强度校验规则
    1、level:表示校验的等级,从弱到强,从1开始编号
    2、flag:1(数字)+2(小写)+4(大写)+8(特殊字符)的组合
    3、value:0表示跟密码一样长,1表示起码1个长度

    var passwordStrengthRule = [
    {level:1,rule:[
           {flag:1,value:[0]},   //数字
           {flag:2,value:[0]},    //小写字符
           {flag:4,value:[0]}   //大写字符
          ]
    },
    {level:2,rule:[
           {flag:8,value:[0]},    //特符
           {flag:9,value:[1,1]},  //数字(>=1)+特符>=1)
           {flag:10,value:[1,1]},  //小写(>=1)+特符>=1)
           {flag:12,value:[1,1]},  //大写(>=1)+特符>=1)
           {flag:3,value:[1,1]}, //数字(>=1)+小写(>=1)
           {flag:5,value:[1,1]}, //数字(>=1)+大写(>=1)
           {flag:6,value:[1,1]}   //小写(>=1)+大写(>=1)
          ]
    },
    {level:3,rule:[
           {flag:11,value:[1,1,1]}, //数字(>=1)+小写(>=1)+特符(>=1)
           {flag:13,value:[1,1,1]}, //数字(>=1)+大写(>=1)+特符(>=1)
           {flag:14,value:[1,1,1]}, //小写(>=1)+大写(>=1)+特符(>=1)
           {flag:7,value:[1,1,1]} //数字(>=1)+小写(>=1)+大写(>=1)
          ]
    }
    ];

  • 相关阅读:
    关于闭包的一些知识
    浏览器解析JavaScript原理(1)
    函数作用域及函数表达式
    jquery
    前端常用插件
    Git及GitHub
    angular框架
    express
    ES6基础
    Node.js相关总结
  • 原文地址:https://www.cnblogs.com/wzmaodong/p/2103596.html
Copyright © 2011-2022 走看看