Умышленно не смог попасть, потерял и вернулся. Непреднамеренная прибыль, никакой радости, но все же дорожим
1. Введение
Проверка формы, я полагаю, что большинство разработчиков сталкивались с этим, и в Интернете доступно множество подключаемых модулей. Но на тот момент я думал, что это простая проверка, и не нужно вводить плагин, поэтому я написал простую функцию сам. С диверсификацией требований к проверке функция становится все больше и больше. Немного прототип колеса, это можно расценивать как непреднамеренную вставку. Настало время поделиться им со всеми. Функция относительно грубая, если у вас есть какие-либо предложения, оставьте комментарий.
1. Что касается процесса реализации, принцип относится к примеру шаблона стратегии в «Шаблоны проектирования JavaScript и практика разработки». Код относительно прост, вы можете перейти по ссылке в конце статьи, скачать соответствующие файлы и запустить и отладить, чтобы узнать тайну. Я не буду вдаваться в подробности, а только покажу, какие сценарии и методы проверки можно использовать.
2. Хотя я буду использовать эту функцию в своем проекте разработки, сегодняшняя статья предназначена в основном для обмена знаниями и представления этого метода проверки формы. В настоящее время функция относительно грубая и функция недостаточно мощная, ее необходимо доработать, и ее следует использовать в проекте с осторожностью.
3. Пример статьи опирается на vue, просто для удобства отображения эта функция является нативной функцией js.
2. Сценарий проверки формы
Сначала кратко перечислим распространенные сценарии проверки формы.
2-1. Проверка основных данных
Что касается правил, названных ниже: правило, все инкапсулированные в этом файле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);
Используются следующие два файла, и вы можете отметить их звездочкой.
JS-файл:GitHub.com/Утренняя встреча YJ/О…
демонстрационный файл:GitHub.com/Утренняя встреча YJ/О…
4. Резюме
Некоторые общие проверки форм временно написаны здесь.Эта непреднамеренная работа пока еще относительно грубая, и в будущем предстоит долгий путь модификации и оптимизации. Вы также можете высказать некоторые конструктивные мнения в области комментариев, и это хорошо для общения.
------------------------- Великолепная разделительная линия --------------------
Если вы хотите узнать больше, общаться со мной и продвигать вакансии, добавьте меня в WeChat. Или обратите внимание на мой паблик WeChat: В ожидании книжного магазина