vue+element-ui表单校验通⽤组件（封装公⽤⽅法）
普通校验⽅法已经⾜够，但是项⽬涉及：需要规避正则特殊字符，特建⽴⼀个组件可以直接调⽤
参考链接：
1.在VUE中新建通⽤的JS，封装公⽤校验⽅法，⽬录：src/utils/formCheck.js
export default内可以分类封装验证，封装不同表单的验证⽅法
// 正则特殊字符校验
const validateSpecialChar = (rule, value, callback) => {
// 所有.* 换成%
let reg1 = new RegExp('\\.\\*', 'g')// g代表全部
let newMsg = place(reg1, '%')
let reg = new RegExp('[\\\\:?.*\\^+<>|{}]')
if (st(newMsg)) {
callback(new Error('正则表达式不能包含\\ : ? . * ^ + < > | { }等单个特殊字符'))
} else {
callback()
}
}
export default {
common: {
// ---------------------公共验证⽅法，可多个
specialChar: [{
required: true,
message: '参数不能为空'
},
{
validator: validateSpecialChar,
trigger: 'blur'
}
],
校验⽅法2：[略],
校验⽅法3：[略]
},
handle: {
/
/ ---------------------处理表单的验证⽅法
operResult: [{// 处理结果（例⼦可⾃由根据表单定义）
required: true,
message: '请选择处理结果'
}],
opinion: [{// 处理结果描述（例⼦可⾃由根据表单定义）
required: true,
message: '请填写处理结果描述'
}]
}
}
2.全局挂载 main.js
1 import currencyRules from './utils/formCheck.js'
2
3 // 全局⽅法挂载
4 Vue.prototype.$rules = currencyRules
3.form标签中调⽤
<el-form-item label="⽩名单违禁词" prop="word" :rules="$rulesmon.specialChar">
<el-input v-model="dataForm.word" placeholder="正则匹配，已⾃动增加.*，填写违禁词即可" ></el-input> </el-form-item>
以上就可以解决，可以同时使⽤<el-form>中校验规则:rules，也可以单独调⽤公⽤⽅法specialChar
4.其他参考
1）.表单标签加  :rules="$rules.handle"
<el-form
ref="form"
:model="form"
label-width="150px"
:rules="$rules.handle"
>
<div class="wrap">
<el-form-item label="处理结果" prop="operResult">
<el-select
v-model="form.operResult"
placeholder="请选择处理结果"
clearable
size="small"
>
<el-option
v-for="item in handle_result"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="处理结果描述" prop="opinion">
<el-input type="textarea" v-model="form.opinion" maxlength="320" show-word-limit></el-input>
</el-form-item>
</div>
</el-form>
2）.单独使⽤ :rules="$rules.handle.opinion"vue element admin
<el-form-item label="处理结果描述" prop="opinion" :rules="$rules.handle.opinion">
<el-input type="textarea" v-model="form.opinion" maxlength="320" show-word-limit>    </el-input>
</el-form-item>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。