簡単です：ステップ1：ページを書くための最初の要素、ステップ2.ルールの検証はカスタムJS 3.検証をカプセル化し、対応するカスタム検証メソッドを導入し、カスタム認証が必要です。
書き込み1.第1の構造。
注：そこから形状モデル（バンドルデータ）、REF（提出有用）、ルール（フォームの検証ルール）に、これらの3つが不可欠です。
2.コード：
<EL-形式：モデル= "ruleForm"：ルール= "ルール" REF = "ruleForm" ラベル幅= "100pxに" クラス= "デモ-ruleForm">
<エル・フォーム・アイテム・ラベル=「イベント名」小道具=「名前」>
<EL-入力V-モデル= "ruleForm.name" MAXLENGTH = "10" タイプ= "テキスト"> </ EL-入力>
</ EL-フォーム項目>
<エルフォーム項目ラベル=「電話番号」プロップ=「電話」>
<EL-入力Vモデル= "ruleForm.phone" タイプ= "番号" MAXLENGTH = 11> </ EL-入力>
</ EL-フォーム項目>
<エルフォーム項目ラベル=「アクティブ領域」プロパ=「領域」>
<V-モデル= "ruleForm.region" プレースホルダ= "アクティブ領域を選択し、" エル選択>
<エル・オプションラベル= "区域一" 値= "上海"> </ EL-オプション>
<エル・オプションラベル= "区域二" 値= "北京"> </ EL-オプション>
</ EL-を選択>
</ EL-フォーム項目>
<EL-フォーム項目>
提交</ EL-ボタン> <クリック= "submitForm（ 'ruleForm'）" @エル・ボタンタイプ= "主">
<EL-ボタンをクリックする= "resetForm（ 'ruleForm'）" @>重置</ EL-ボタン>
</ EL-フォーム項目>
</ EL-形態>
3.data操作データ。
コード：
「../commonJs/common.js」からインポートフォーマット
データ（）{
リターン{
ruleForm：{
名前： ''、
電話： ''、
地域： ''、
}、
ルール：{
名前：[
{
バリ:. Format.FormValidate.Form（）名、//バリ：カスタム検証ルール
トリガー：「ぼかし」
}
]、
電話：[
{
バリ：。Format.FormValidate.Form（）電話番号、
トリガー：「ぼかし」
}
]、
地域：[
{必須：○、メッセージ：「アクティブエリアを選択してください」、トリガー「変更」} //検証
]、
}
}。
}、
フォーム検証JSの4の調製（新JS）
（^ \ D {18} $）| |（^ \ D {17}（\ D | X | X）$）/ regId = /（^ \ D {15} $）させ
メール= /^(\w+\.?)*\w+@(?:\w+\.)\w+$/ // Eメールをしましょう
せTEL = / ^ 1 [345789] \ D {9} $ / //電話番号
let fax = /^(\d{3,4}-)?\d{7,8}$/ //传真
let name = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,10}$/; //姓名
let FormValidate = (function () {
// eslint-disable-next-line
function FormValidate() {}
// From表单验证规则 可用于公用的校验部分
FormValidate.Form = function () {
return {
// 姓名的验证规则
Name: function (rule, value, callback) {
if (!value) {
return callback(new Error('姓名不能为空'))
}
if (!name.test(value)) {
callback(new Error('请输入正确姓名!'))
} else {
callback()
}
},
// 邮箱的正则
Email: function (rule, value, callback) {
if (!value) {
return callback(new Error('邮箱不能为空'))
}
if (!email.test(value)) {
callback(new Error('请输入正确的邮箱!'))
} else {
callback()
}
},
// 身份证的验证规则
ID: function (rule, value, callback) {
if (!value) {
return callback(new Error('身份证不能为空'))
}
if (!regId.test(value)) {
callback(new Error('请输入正确的二代身份证号码'))
} else {
callback()
}
},
// 电话号码的验证
Tel: (rule, value, callback) => {
if (!value) {
return callback(new Error('电话不能为空'))
}
if (!tel.test(value)) {
callback(new Error('请正确填写电话号码'))
} else {
callback()
}
}
}
}
// FromOne表单验证规则 用于FromOne个性化的校验
FormValidate.FormOne = function () {
return {
// 姓名的验证规则
Name: function (rule, value, callback) {
if (!value) {
return callback(new Error('姓名不能为空'))
}
if (!name.test(value)) {
callback(new Error('请输入正确姓名!'))
} else {
callback()
}
}
}
}
return FormValidate
}())
exports.FormValidate = FormValidate
5.点击提交/重置事件
代码：
methods: {
// 提交
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
// 重置
resetForm(formName) {
this.$refs[formName].resetFields();
}
},
6.demo展示
