jquery多功能表单验证

 查看演示  website  立即下载

更新时间：2019/5/1 上午10:47:07

更新说明：
1. 新增ajax表单提交，提交表单的按钮可以是任何标签(不是 <input type="submit"> 就行 )
    注意：验证的input的name属性必须要写值 <input name="a">,否则表单提交会获取不到数据(表单数据已经序列化)
2. 新增阅读同意验证

使用用法

给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", //设置错误提示文字的颜色，不设置默认红色
})

PREVIOUS:
NEXT:
jQuery实用工具集
vue 城市下拉模拟组件Citypicker