[无意插柳]简单实现经常使用的表单校验函数
有意取而不得，失落而归。无心间有所获，未有喜悦，但珍惜依旧
1.前言
表单校验，相信绝大部分的开发者会遇到过，网上也有不少插件可以使用。但当时想着就是简单的校验，不必引插件，就本身写一个简单的函数。随着校验的需求多样化，函数愈来愈大。有点轮子的雏形，算是无意插柳吧。如今也该分享出来了，和你们交流交流。函数比较粗糙，若是你们有建议，评论留言吧。html
1.关于实现的过程，原理都是参考了《JavaScript设计模式与开发实践》策略模式的一个例子。代码比较简单，你们移步到文末的连接，下载相关的文件，运行调试下就会知道是当中的奥秘了。这里就不作过多的介绍，只展现出能够应付哪些校验场景和使用的方法。2.虽然我开发项目中会使用这个函数，但今天的文章，主要是出于分享和交流学习，介绍下这种表单校验的方式。目前函数比较粗糙，功能不够强大，待完善，在项目中使用要注意谨慎。vue
3.文章例子依赖 vue ，只为了方便展现，该函数为原生 js 函数。git
2.表单校验的场景
首先，简单列举下表单校验的经常使用场景github
2-1.基础数据校验
关于下面调用的规则：rule，所有封装在这个文件下面的 ruleData这个变量这里。一看就知道怎么回事了。提供了经常使用的校验规则，须要的能够扩展。
调用代码设计模式
<div id="form-box">
<!--校验单个字段-->
<div class="m-from-box">
<p><input type="text" class="u-input-text" placeholder="请输入姓名" v-model="demo1.userName"></p>
<p class="u-tips">{{demo1.tips.userName}}</p>
<p><input type="text" class="u-input-text" placeholder="请输入电话或者邮箱" v-model="demo1.userContact"></p>
<p class="u-tips">{{demo1.tips.userContact}}</p>
<p><input type="button" class="u-btn-submit" value="提交" @click="handleSubmit1"></p>
</div>
</div>
new Vue({
el: '#form-box',
data: {
demo1: {
userName: '',
userContact: '',
tips: ''
}
},
methods: {
handleSubmit1(){
let _this = this;
let _tips=ecValidate.check([
{
//校验的数据
el: _this.demo1.userName,
//校验的规则
rules: [
{rule: 'isNoNull', msg: '姓名不能为空'}
],
},
{
//校验的数据
el: _this.demo1.userContact,
//校验的规则
rules: [
{rule: 'isNoNull', msg: '联系方式不能为空'},
{rule: 'isMobile', msg: '请输入正确的联系方式'}
]
}
])
this.demo1.tips = _tips;
}
}
})
2-2.多种校验规则
输入电话或者邮箱均可以数组
调用代码微信
<div id="form-box">
<!--...-->
<div class="m-from-box">
<p><input type="text" class="u-input-text" placeholder="请输入姓名" v-model="demo2.userName"></p>
<p><input type="text" class="u-input-text" placeholder="请输入电话或者邮箱" v-model="demo2.userContact"></p>
<p class="u-tips" :class="{'success':demo2.tips==='success'}">{{demo2.tips}}</p>
<p><input type="button" class="u-btn-submit" value="提交" @click="handleSubmit2"></p>
</div>
</div>
new Vue({
el: '#form-box',
data: {
//...
demo2: {
userName: '守候',
userContact: '',
tips: ''
},
},
methods: {
//...
handleSubmit2(){
let _this = this;
let _tips=ecValidate.check([
{
//校验的数据
el: _this.demo2.userName,
//校验的规则
rules: [
{rule: 'isNoNull', msg: '姓名不能为空'}
],
},
{
//校验的数据
el: _this.demo2.userContact,
//校验的规则
rules: [
{rule: 'isNoNull', msg: '联系方式不能为空'},
{rule: 'isMobile,isEmail', msg: '请输入正确的联系方式'}
]
}
])
this.demo2.tips = _tips;
}
}
})
2-3.扩展校验规则
好比要增长一个校验规则：名字只能是中文（只能输入中文，这个规则已经收录了，这里只做为展现使用）函数
<div id="form-box">
<!--...-->
<!--单个字段，扩展规则-->
<div class="m-from-box">
<p><input type="text" class="u-input-text" placeholder="请输入姓名" v-model="demo3.userName"></p>
<p class="u-tips" :class="{'success':demo3.tips==='success'}">{{demo3.tips}}</p>
<p><input type="button" class="u-btn-submit" value="提交" @click="handleSubmit3"></p>
</div>
</div>
new Vue({
el: '#form-box',
data: {
//...
demo3: {
userName: '',
tips: ''
},
},
methods: {
//...
handleSubmit3(){
let _this = this;
let _tips=ecValidate.check([
{
//校验的数据
el: _this.demo3.userName,
//校验的规则（使用在 mounted 的扩展语法）
rules: [
{rule: 'isNoNull', msg: '姓名不能为空'},
{rule: 'isChinese', msg: '姓名只能输出中文'}
],
}
])
this.demo3.tips = _tips;
}
},
mounted:function () {
//添加扩展规则
ecValidate.addRule('isChinese',function (val, msg) {
return !/^[\u4E00-\u9FA5]+$/.test(val) ? msg : '';
})
}
})
2-4.数据有误，定位第一个有误的数据
调用代码学习
<div id="form-box">
<!--...-->
<div class="m-from-box">
<p><input type="text" class="u-input-text" placeholder="请输入姓名" v-model="demo4.userName" :class="{'err':demo4.tips.userName}"></p>
<p class="u-tips">{{demo4.tips.userName}}</p>
<p><input type="text" class="u-input-text" placeholder="请输入电话或者邮箱" v-model="demo4.userContact" :class="{'err':demo4.tips.contact}"></p>
<p class="u-tips">{{demo4.tips.contact}}</p>
<p class="u-tips success" v-if="demo4.tips==='success'">提交成功</p>
<p><input type="button" class="u-btn-submit" value="提交" @click="handleSubmit4"></p>
</div>
</div>
new Vue({
el: '#form-box',
data: {
//...
demo4: {
userName: '',
userContact: '',
tips: {}
},
},
methods: {
//...
handleSubmit4(){
let _this = this;
//在校验数组里面加上alias字段，保存错误信息。该字段要保证值惟一性，而且要么所有加上，要么所有不加，否则可能会形成页面错误
let _tips=ecValidate.check([
{
//校验的数据
el: _this.demo4.userName,
alias: 'userName',
//校验的规则
rules: [
{rule: 'isNoNull', msg: '姓名不能为空'}
],
},
{
//校验的数据
el: _this.demo4.userContact,
alias: 'contact',
//校验的规则
rules: [
{rule: 'isNoNull', msg: '联系方式不能为空'},
{rule: 'isMobile,isEmail', msg: '请输入正确的联系方式'}
]
}
])
this.demo4.tips = _tips;
}
},
},
mounted:function () {
}
})
2-5.哪些数据有误，定位有误的数据
调用代码优化
<div id="form-box">
<!--...-->
<!--校验所有-->
<div class="m-from-box">
<p><input type="text" class="u-input-text" placeholder="请输入姓名" v-model="demo5.userName" :class="{'err':demo5.tips.userName}"></p>
<p class="u-tips">{{demo5.tips.userName}}</p>
<p><input type="text" class="u-input-text" placeholder="请输入电话或者邮箱" v-model="demo5.userContact" :class="{'err':demo5.tips.contact}"></p>
<p class="u-tips">{{demo5.tips.contact}}</p>
<p class="u-tips success" v-if="demo5.tips==='success'">提交成功</p>
<p><input type="button" class="u-btn-submit" value="提交" @click="handleSubmit5"></p>
</div>
</div>
new Vue({
el: '#form-box',
data: {
//...
demo5: {
userName: '',
userContact: '',
tips: {}
},
},
methods: {
//...
handleSubmit5(){
let _this = this;
//checkAll校验所有的函数，必需要加上alias字段。
let _tips=ecValidate.checkAll([
{
//校验的数据
el: _this.demo5.userName,
alias: 'userName',
//校验的规则
rules: [
{rule: 'isNoNull', msg: '姓名不能为空'}
],
},
{
//校验的数据
el: _this.demo5.userContact,
alias: 'contact',
//校验的规则
rules: [
{rule: 'isNoNull', msg: '联系方式不能为空'},
{rule: 'isMobile,isEmail', msg: '请输入正确的联系方式'}
]
}
])
this.demo5.tips = _tips;
},
},
mounted:function () {
}
})
2-6.实时校验
调用代码
<div id="form-box">
<!--...-->
<!--单个输入，实时校验-->
<div class="m-from-box">
<p><input type="text" class="u-input-text" placeholder="请输入电话或者邮箱" v-model="demo6.userContact" :class="{'err':demo6.tips&&demo6.tips!=='success'}" @input="handleInput6"></p>
<p class="u-tips" :class="{'success':demo6.tips==='success'}">{{demo6.tips}}</p>
</div>
</div>
new Vue({
el: '#form-box',
data: {
//...
demo6: {
userContact: '',
tips:'',
},
},
methods: {
//...
handleInput6(){
let _this = this;
let _tips=ecValidate.check([
{
//校验的数据
el: _this.demo6.userContact,
//校验的规则
rules: [
{rule: 'isNoNull', msg: '联系方式不能为空'},
{rule: 'isMobile,isEmail', msg: '请输入正确的联系方式'}
]
},
])
this.demo6.tips = _tips;
},
},
mounted:function () {
}
})
2-7.实时校验，其余校验规则
好比密码强度和长度的校验
调用代码
<!--单个输入，实时校验-密码强度-->
<div class="m-from-box">
<p><input type="text" class="u-input-text" placeholder="请输入密码" v-model="demo7.pwd" @input="handleInput7"></p>
<p class="u-tips" :class="'lv'+demo7.tips" v-if="demo7.tips.constructor===Number">密码强度：{{demo7.tips}}</p>
<p class="u-tips" :class="'lv'+demo7.tips" v-else>{{demo7.tips}}</p>
</div>
new Vue({
el: '#form-box',
data: {
//...
demo7: {
pwd:'',
tips: '',
}
},
methods: {
handleInput7(){
let _this = this;
let _tips=ecValidate.check([
{
//校验的数据
el: _this.demo7.pwd,
//校验的规则
//因为检查密码强度规则 pwdLv 是实时返回密码强度，并不是报错信息。因此该规则要放置在最后
rules: [
{rule: 'minLength:6', msg: '密码长度不能小于6'},
{rule: 'maxLength:16', msg: '密码长度不能大于16'},
{rule: 'pwdLv'}
]
},
])
//判断 _tips 是不是数字
this.demo7.tips = _tips.constructor===Number?+_tips:_tips;
},
},
mounted:function () {
}
})
感受密码强度这样写法有点鸡肋，也不方便，这个是重点优化部分。
2-8.校验数据类型
好比下面检测的是一个数据是不是数组类型
调用代码
let tips=ecValidate.check([
{
el:'[1,2,3,4,5]',
rules:[{rule:'isType:array',msg:'传进去的数组不是数组'}]
}
]);
console.log(tips);
用到的文件就是下面两个，也欢迎你们 star 一下。
js文件： https://github.com/chenhuiYj/...
4.小结
关于表单的一些经常使用校验，就暂时写到这里了，这个无意插柳的做品，如今还比较粗糙，之后还要有很长的修改优化之路。也欢迎你们在评论区提出一些建设性的意见，当交流也好。
-------------------------华丽的分割线--------------------
想了解更多，和我交流，内推职位，请添加我微信。或者关注个人微信公众号：守候书阁
相关文章
- 1. [无意插柳]简单实现经常使用的表单校验函数
- 2. 经常使用表单校验RegExp
- 3. 表单校验插件的使用
- 4. 使用JavaScript实现表单校验
- 5. 表单校验的使用
- 6. jQuery实现表单校验
- 7. validate实现表单校验
- 8. verify.js 极简表单校验插件
- 9. jquery表单校验插件
- 10. 经常使用表单校验正则表达式
- 更多相关文章...
- • PHP 表单验证 - PHP教程
- • PHP 完整表单实例 - PHP教程
- • TiDB 在摩拜单车在线数据业务的应用和实践
- • ☆基于Java Instrument的Agent实现
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. [无意插柳]简单实现经常使用的表单校验函数
- 2. 经常使用表单校验RegExp
- 3. 表单校验插件的使用
- 4. 使用JavaScript实现表单校验
- 5. 表单校验的使用
- 6. jQuery实现表单校验
- 7. validate实现表单校验
- 8. verify.js 极简表单校验插件
- 9. jquery表单校验插件
- 10. 经常使用表单校验正则表达式