jquery多功能表单验证

所属分类:输入-验证

 4819  36  查看评论 (4)
jquery多功能表单验证 ie兼容8

使用用法

给input的父盒子加class类名vali,此项必须要加,不然没有提示,可自定义类名

myvali配置class或者id都可以

注意:

1.json配置必须要有值,如不需要配置,删除或注释,与服务器交互的提交方式不可以修改,默认post方法

2.开启与服务器验证必须要写路径。提交方式和格式不写默认post方法,json格式;

  • 手机号验证提交后台数据的格式: data:{phone:vl}, 后台返回1可以注册(发送短信功能)

  • 发送短信验证提交后台数据的格式: data:{phone:vl}, 此项提交的是验证手机号的数据,与上面配合使用(发送短信功能)

  • 手机号验证提交后台数据的格式: data:{phone1:vl}, 后台返回1可以注册(单独验证)

  • 输入手机短信验证码提交后台数据的格式: data:{vcode:vl}, 后台返回1正确,返回0错误,返回-1过期

  • 用户名验证提交后台数据的格式: data:{name:vl}, 后台返回1可以注册

  • 验证码验证提交后台数据的格式: data:{codes:vl}, 后台返回1正确

  • 邮箱验证提交后台数据的格式: data:{mailbox:vl}, 后台返回1正确

3.一个ingput框只能出现一种验证。

例:<input type="text" class="" id="name" placeholder="昵称"> (√)

例:<input type="text" class="Required" id="name" placeholder="昵称"> (×)

4.表单提交按钮必须是input,type="submit"

5.表单里不能再出现p标签

6.开启手机短信验证,发送短信按钮标签必须是input,type="button"

7.手机号验证有两个方法myPhone1,myPhone,只验证手机号用哪个方法都可以。需要发送短信功能(验证码验证同时验证发送短信功能),用myPhone方法。myPhone1方法一般用于单独验证(修改手机号)

8.验证不为空自定义提示,要验证的元素加Requireds,要验证的元素的父盒子加reqtps。自定义默认提示不想验证长度,但是第二个自定义提示需要验证长度提示的话,第一个提示只需要给个空字符串即可

配置:

$.myvali({
    myform: ".form2", //表单id
    mybtn: ".btn", //提交表单按钮id	
    myVali: ".vali", //input父盒子的class,可自定义类名
    Required: ".Required", //验证必填选项,值为Required,input自己加class
    RequiredTps: ["不能为空!!!"], //只验证不为空提示
    Requireds: ".Requireds", //验证必填不同提示,值为Requireds,input自己加class
    reqtps: ".reqtps", //验证不为空不同提示,input父盒子的class,可自定义类名
    Reqlength: [
        [2, 4]
    ], //只验证不为空,设置最小长度和最大长度
    ReqlengthTps: ["+不为空1"], //验证不为空长度提示
    RequiredsTps: ["这是自定义提示1"], //默认提示
    myNuber: ".nub", //数字验证
    myNuberlength: [5, 10], //数字长度
    myNameNuber: "QQ", //数字提示
    chinese: ".chinese", //中文验证id
    chinesetps: {
        minLength: 2, //最小长度
        maxLength: 4, //最大长度
        tps: "姓名", //提示
    },
    myName: ".uersname", //用户名id或class
    nameIsServer: true, //用户名是否要与数据库验证,true为是,默认false为否
    nameIsServerUrl: ["1.php"], //用户名与数据库验证的路径。
    nameIsServerType: "post", //用户名以什么方式提交
    nameIsServerDType: "json", //用户名以什么格式提交
    myPassword: ".pasw", //密码id或class
    myPasswordMinLength: 6, //密码最小长度,不写默认长度6
    myPasswordMaxLength: 16, //密码最大长度,不写默认长度16
    myConfirmPassword: ".pasws", //确认密码id或class
    myPhone: ".phone", //手机号id或class
    phoneIsServer: true, //手机号是否与数据库验证,true为是,默认false为否
    phoneIsServerUrl: ["1.php"], //手机号与数据库验证的路径
    phoneIsServerType: "post", //以什么方式提交
    phoneIsServerDType: "json", //以什么格式提交
    isPhoneCode: true, //开启手机短信验证,true开启,默认false不开启(此项功能与myPhone配合验证)
    phoneCodeBtn: ".codebtn", //发送手机验证码id或class(按钮)
    count: 30, //发送短信验证码倒计时,默认60s(按钮)
    codeBtnCol1: ["rgb(150, 150, 150)"], //短信验证码倒计时(按钮,通过验证前)颜色
    codeBtnCol2: ["#333"], //短信验证码倒计时(按钮,通过验证后)颜色
    isPhoneCodeUrl: ["1.php"], //发送手机验证码与数据库验证的路径(按钮)
    isPhoneCodeType: "post", //以什么方式提交(按钮)
    isPhoneCodeDType: "json", //以什么格式提交(按钮)
    myPhone1: "#v", //修改手机号(原手机号用这个验证)id或class
    phoneIsServer1: false, //手机号是否与数据库验证,true为是,默认false为否
    phoneIsServerUrl1: ["1.php"], //手机号与数据库验证的路径
    phoneIsServerType1: "post", //以什么方式提交
    phoneIsServerDType1: "json", //以什么格式提交
    phoneCodeInput: ".phcode", //短信验证码id或class(输入框)
    phoneCodeInputUrl: ["1.php"], //短信验证码与数据库验证的路径(输入框)
    phoneCodeInputType: "post", //以什么方式提交(输入框)
    phoneCodeInputDType: "json", //以什么格式提交(输入框)
    myMailbox: ".eal", //邮箱id或class
    mailboxIsServer: false, //邮箱是否要与数据库验证,默认false为否
    mailboxIsServerUrl: ["1.php"], //邮箱与数据库验证的路径
    mailboxIsServerType: "post", //以什么方式提交
    mailboxIsServerDType: "json", //以什么格式提交
    myCard: ".cid", //身份证验证id或class
    myCode: "#v", //验证码id或class
    CodeIsServerUrl: ["1.php"], //验证码与数据库验证的路径
    CodeIsServerType: "post", //以什么方式提交
    CodeIsServerDType: "json", //以什么格式提交
    PwdStrong: true, //密码强度验证,默认false不开启,true开启
    isStrongTps: ["弱", "中", "强"], //密码强度提示,可自定义提示
    myNameMinLength: 3, //用户名最小长度,不写默认长度3
    myNameMaxLength: 12, //用户名最大长度,不写默认长度12
    myNameMinLength2: 3, //昵称最小长度,不写默认长度3
    myNameMaxLength2: 12, //昵称最大长度,不写默认长度12
    corrCol: "#4E7504", //设置正确提示文字的颜色,不设置默认绿色
    errCol: "red", //设置错误提示文字的颜色,不设置默认红色
})

相关插件-验证

jQuery滑动拼图验证插件SliderImgPuzzle(原创)

仿造网络上的类似的拼图控件,还有结合自己的项目封装的
  验证
 1111  12

jquery注册验证

jquery动态注册验证
  验证
 24923  70

JQuery表单验证插件EasyValidator,超级简单易用!

用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手。
  验证
 24029  69

大气简洁的登录注册特效

大气简洁的登录注册特效带注册验证
  验证
 30878  264

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币

    Drunk 0
    2018/5/31 11:26:10
    你这个身份证验证有非中国大陆的身份证验证吗
        ? ?? ? ??0
        2018/6/5 10:14:48
        这个身份证验证只验证15位和18位数字的,还有18位最后一位X的。
    回复
    Pg_Channel 0
    2018/5/25 17:10:25
    想知道为什么点击输入密码后,再点击再次输入密码,然后再点击输入密码,会出现再次输入密码的文字消失,是什么问题
        ? ?? ? ??0
        2018/5/26 23:50:16
        这不是什么问题,因为我做了两个密码都对比是不是一样的,不管你点击哪个密码都会触发这个对比。
        但是再次输入密码为空的话,提示就会消失。
    回复
取消回复