# X基于jq的表单验证插件
**Repository Path**: xueyanjun/X-formValidata
## Basic Information
- **Project Name**: X基于jq的表单验证插件
- **Description**: 自己写的基于jq的表单验证插件吗，几年前做的轮子，现在拿出来，当个纪念吧。有需要的可以下载使用！
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 2
- **Forks**: 0
- **Created**: 2019-03-02
- **Last Updated**: 2025-09-05
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 基于jq的表单验证插件
#### 介绍
自己写的基于jq的表单验证插件吗，几年前做的轮子，现在拿出来，当个纪念吧。有需要的可以下载使用！
#### 效果图
#### 安装教程
页面中引入：
```
```
#### 快速上手
html调用示例：
```
demo
```
#### 使用说明
@desc 自定义验证函数2.03
开头声明：
1.本函数的验证能满足大部分情况，但不是所有，有些特殊的验证还需要你自己来写。
2.本函数自带的提交表单方法可满足大部分情况
3.在您自己写提交函数之前，如果你还需要继续使用本函数的验证，您需要知道,判断验证是否通过我建议这样写：
```
var checker = new checker2("form",{
inputBox:"input"
});
$("#yourBtn").click(function(){
if(checker.triggers()){
//你的各种代码
}else{
alert('请正确填写各项信息后，
再点击『'+$(this).text()+'』！');
}
});
//清除页面中的所有验证提示与验证结果这样写：checker.resets();
//单个清除页面中的所有验证结果这样写：$("input").removeAttr("resultsof");
//单个清除页面中的所有验证错误提示文本：$("[thistipno]").remove();
```
@ 函数调用：
第一个参数是表单的选择器，第二个参数是传入的默认值
####
var checker = new checker2("form",{
tipsSide :1, //1,2,3,4 分别代表【上右下左】 [1,4]代表位置在1~4随机 例如：[2,3]代表位置在2~3随机
tipsColor :'#FFF', //错误提示的文字颜色
tipsBg :"red", //错误提示的背景颜色
tipsTime :3, //错误提示自动消失秒数
tipsX :0, //错误提示横向偏移px
tipsY :0, //错误提示纵向偏移px
tipsCount :"each", //“only,each,more”,only代表当前页面只能有一个tip，each代表每个input都能有一个tip，more代表当前页面不限制tip，新的添加 旧的也不关闭
tipsmaxWidth:"130", //tip的最大显示宽度（px）
tipsScroll : null, // 该参数接受选择器，定义的选择器的dom在滚动时将重新计算input距离窗口边界的值。在一些特殊的弹出层比较有用
event :"change", //默认的表单校验触发事件,你可以通过在html的input元素上添加data-event属性来传入自定义事件
inputBox :"input", //默认所有input都触发,你可以传入你自己的选择器
notEmpty : true, //是否开启非空验证（true表示验证组件的值不能为空，false表示可以为空。默认true）
parentBox : null, //默认的input的父元素（通过null占位下面代码会进行判断）,你也可以传入自己的选择器来指定父元素
btnSubmit : null, //表单提交按钮（选择器）
btnReset : null, //表单重置按钮（选择器）
resetCall : "", //表单重置后的回调函数，有时你可能需要重置表单后还做些什么
Enter : true, //是否开启键盘回车触发checker提交 ！！注意一个dom页面只能显性的（注册了回车提交的表单只能显示一个，不可同时显示多个表单）为一个表单开启回车提交，否则checker2将自动禁用回车
btnSendSms : null, //发送短信校验码的按钮（选择器）
smsUrl : '/control/sms/anon/sendSms.do' ,//默认的发送短信的接口（路径）
smsData : {}, //该字段用于发送短信验证码时的参数，可以用来补充参数。
dyncLdForm : false, //是否动态的加载Form表单，true代表是，用于解决form是后插入页面的元素 选不中的问题
action : $(this).attr("action"), //默认的表单提交路径
method : $(this).attr("method"), //默认的表单提交方式
async : true, //表单提交时使用异步或者同步方式，true异步，false同步
data : {}, //该字段用于设置表单提交时，有些参数无法序列化，从而手动的将这些参数添加到发送的数据中。例如一个div中的text()就无法序列化这时你可以构造一个对象{divname:divtext}放到这里
dataType : "object", //表单提交的数据格式 "object"代表对象格式，"string"代表字符串格式
callback : errorCallback //表单提交成功的回调函数，注意只有请求成功才有回调函数，回调函数自己定义
});
*===============================================================================================================*
data-checkway :自定义验证函数声明,有时我们可能需要做一些复杂的验证，这时自定义验证函数是很有必要的。以下函数需要先实例化checker2，除getOptions() 均支持链式调用
##您可以自定义验证方式
checker.setCheckway({
abc:function(value){
if((! /(^(13|14|15|18)\d{9}$)/.test(value))) {
return "您输入的手机号码格式不正确！";
}
return "success";
},
def:function(value,input_dom){ //函数有俩个参数，第一个为输入组件返回的值，第二个为输入组件本身，（可选择传递）
//做些什么
},
});
##您还可以给设置好的验证方式设置一个默认的错误提示，如：
checker.setCheckMess( {
abc:"没有错，我就是abc"
} );
这样设置后您的设置验证函数的返回值应该这样写：
checker.setCheckway({
abc:function(value){
if((! /(^(13|14|15|18)\d{9}$)/.test(value))) return checkMess.abc;
},
});
##您还可以自定义设置（ajax）检验远程路劲
checker.setCheckUrl( {
abc:"www.abc.abc",
} );
checker.setCheckData( {
abc:{abc:"我是上面checkurl需要携带的参数"},
} );
##有时你可能还需要动态的设置表单提交的数据
checker.setFormData( {
name:zhaosi,
age:40,
} );
##有时你可能还需要动态的设置短信接口提交的数据，提示：你可以在dom上添加data-smskey属性来指定参数的key,dom的优先级最高
checker.setSmsData ( {
"mobilephone":"15000000000",
"flag" : "1"
} );
##有时你可以先实例checker2 再设置参数
var checker = new checker2("form");
checker = checker.setOptions({
event :"change",
inputBox :"input",
btnSubmit : "#submitBtn"
});
注：setOptions(options,formbox); 有俩个参数 第一个是重新设置的checker2各项属性键值，第二个是form的选择器（字符串）。当需要重新设置为checker2更换表单时，可传入第二个对象来重新设置。
##获取当前checker2的参数
checker.getOptions(options);
##有时你可能需要一次性的卸载checker2的验证。
checker.uninst();
最后在input上这样调用您的自定义验证函数
@input添加属性：
data-checkway :该input的校验方式,可使用函数自带的验证方式也可以自定义验证函数。
data-confirm :声明此属性后代表该input是用于密码的第二次确认，例如：在input 上添加 data-confirm="#abc"， 这表示当前确认文本需同id为abc的input文本相同才能通过验证。
data-smsinput :该属性只适用于发送短信验证码的button（按钮） ，data-smsinput找到哪个input将接受发送的短信验证码（用于button点击时，校验手机号码是否填写正确）
data-smskey :该属性(同样只适用于上述button)代表发送短信验证码时要发送的键，例如要发送这样的数据{mobile:15000000000} ,那这里就写字符串 "mobile"。
data-smsurl :该属性(同样只适用于上述button)代表发送短信验证码时要请求的路径，例如发生路径为 www.abc.com ,那这里就写字符串 "www.abc.com"。
data-ajaxurl :此属性代表该input将启用ajax服务器端验证,例如：data-ajaxurl="12.do?moblie"; 问号前面代表ajax的url,问号后面代表该ajax发送的参数的key。也可以利用setCheckUrl() 与 setCheckData()来设置远程检验的路径与参数。
data-ajax-result:此属性代表该ajax的返回值的错误情况，例如返回false代表错误，那么这里就填字符串"false"。
data-ajaxmsg :此属性代表该ajax返回验证错误时的提示信息，例如："您的手机号被占用"。
data-nullmsg :该input value值为空时的提示,不写此属性将提示默认 ‘该字段不能为空’ 字样。
data-errmsg :该input value值不符合验证规则的提示,不写此属性将提示默认 （下方函数内查看） 字样。
data-sucmsg :该input value值通过验证规则时的提示,不写此属性将只提示正确的小图标
data-maxlen :该input 可输入的最大字符长度
data-minlen :该input 可输入的最小字符长度
data-lenmsg :该input value值长度未通过验证时的提示。可不写默认提示，最小与最大限制长度
data-nocheck :声明该属性表示 input不参与验证
@data-checkway (默认验证方式一览):
select : //下拉框验证方式（比较特殊）本函数默认验证下拉未选择即默认值等于0的情况
mobilephone : (/(^(13|14|15|18)\d{9}$)/), //手机号码 验证方式
telphone : (/^((\d{3,4}\-)|)\d{7,8}(|([-\u8f6c]{1}\d{1,5}))$/) //固定电话 验证方式
username : (/^[\u4e00-\u9fff\w]{2,25}$/), //用户名 验证方式
realname : (/^[\u4e00-\u9fa5]*$/), //用户真实姓名 验证方式
date : (/^(19|20)\d{2}-(1[0-2]|0?[1-9])-(0?[1-9]|[1-2][0-9]|3[0-1])$/), //日期 验证方式
companyname : (/^[\u4e00-\u9fff\w]{5,25}$/), //公司名称 验证方式
money : (/^\+?[1-9][0-9]*$/), //资金 验证方式
password : (/^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,18}$/), //密码 验证方式
passagain : 确认密码验证，值与password相同
banknum : (/\d{4}/g), //银行卡号码 验证方式
postalcode : (/^[0-9]\d{5}$/), //邮政编码 验证方式
email : (/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/), //邮箱地址 验证方式
smscode : (/^\d{6}$/), //短信验证码 验证方式
bankLuhm : //银行卡号码的复杂验证方式
cardId : //复杂的身份证号码验证方式
####
#### 参与贡献
1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request
#### 码云特技
1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2. 码云官方博客 [blog.gitee.com](https://blog.gitee.com)
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目
4. [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
5. 码云官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6. 码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)