jquery多功能表单验证

所属分类:输入-验证

 1298  19  查看评论 (0)
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", //设置错误提示文字的颜色,不设置默认红色
})

相关插件-验证

基于ajax的登录效果

这是一个机遇ajax的登录效果,登陆过程无跳转。
  验证
 19396  115

jQuery常用网站表单验证

可用于用户注册,网站留言等,有正在输入提示和失去焦点自动正则验证输入框内容
  验证
 8663  44

点击按钮获取验证码倒计时

这是一个基于jQuery的点击按钮获取验证码倒计时插件,这个插件在我们的开发中非常常用
  验证
 17269  106

jQuery验证插件check.js

不提供任何提示,仅提供配置的接口,通过回调的方式来进行
  验证
 4261  5

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

取消回复