参考element-ui 表单验证思维写的 jq 表单验证
2019-08-25 本文已影响0人
还好还好L
不逼逼上代码
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="valid.js"></script>
</head>
<body>
<form class="forms">
<input type="text" name="name" />
<input type="password" name="pwd" />
<input type="password" name="pwd2" />
<div id="sub">提交</div>
</form>
</body>
<script type="text/javascript">
var reg = [{
name:"name",
type:"len",
reg:"0,9",
msg:"最多9个字母"
},{
name:"pwd",
type:"reg",
reg:"/^[a-z0-9]{6,10}/img",
msg:"请输入6-10位的数字字母密码"
},{
name:"pwd2",
type:"val",
typeName:"pwd",
msg:"两次密码不一样"
}];
var valid = new Validation(".forms","#sub",reg,true)
// valid.click(function (data){
// console.log(data,"方法click")
// })
// valid.change(function (data){
// console.log(data,"方法change")
// },false)
valid.blur(function (data){
console.log(data,"方法blur")
})
</script>
</html>
使用方法
// 验证规则对象
// 格式 {
// name:input的name值,
// type：(len长度 ， reg正则表达式 ， val某个输入框的值[需配合 typeName使用]),
// reg：规则，typeName:type为val时设置 值为对应的name,
// msg：放回的错误信息
// }
var reg = [{
name:"name",
type:"len",
reg:"0,9",
msg:"最多9个字母"
}];
// 传入的参数
// 1 form节点 id class 标签都可以
// 2 点击触发节点
// 3 验证规则
// 4 是否显示错误信息 true/false 默认false
var valid = new Validation(".forms","#sub",reg,true)
// 方法 第一个为回调函数 第二个为配置
// 返回数据格式 [{name: 验证的名字, result: 对应验证的结果, value: 验证的值, reg: 所生成的正则, msg: 错误提示返回}]
// 方法click 点击时进行验证 返回所有 错误对象
valid.click(function (data){
console.log(data,"方法click")
})
// 方法change 键盘抬起时验证 不会弹出错误信息 传入 true时 以数组的形式返回所有的验证结果 否则返回当前输入框验证对象 默认false
valid.change(function (data){
console.log(data,"方法change")
},false)
// 方法blur 失去焦点时验证 不会弹出错误信息 返回错误信息
valid.blur(function (data){
console.log(data,"方法blur")
})
