什么是表单验证？
表单验证通常往往用于一些信息填写完成以后, 前端提交到服务器之前的一个自检过程，比如：用户输入的手机号是都正确？用户输入的邮箱是否正确？此项信息是否是必填？
在提交到服务器之前去拦截信息的正确性。正确则提交服务器，错误则弹出警告提示！
基础的表单校验(Element-UI form)：
**email **: 校验邮箱格式
maxlength：最大输入长度
minlength：最小输入长度
为什么要自定义 form 表单验证？
当使用 form 表单时，基础的一些验证满足不了我们项目中的需求时，这时候我们就需要去自定义验证规则。
如何自定义 form 表单验证？
现在我们来定义一个在项目中使用过的表单验证，来校验我们输入的富文本内容是否为空，包括空格。
Html 部分
01
<el-form label-position="right":rules="rules"size="small"ref="formRef":model="form"><el-form-item prop="content"><Editor v-if="isnextTick":content="content":editorRef="editor2"@keydown="(e) => keydownup(e)"@onChangeEdito="onChangeEdito"></Editor></el-form-item>
复制代码
定义 Rules 部分
02
const rules = reactive({ content: [{ required: true, validator: checkSpace, trigger: "blur" }] });const checkSpace = (rule, value, callback) => { if (!value.trim()) { callback(new Error("发布评论不能为空")); } else { callback(); } };const checkVal = (str) => { let num = 0; const reg = /<p>(&nbsp;|&nbsp;\s+)+<\/p>|<p>(<br\/>)+<\/p>/g; while (num < str.length && str !== "") { num++; const k = str.match(reg); if (k) { str = str.replace(k[0], ""); } } return str === ""; };
复制代码
form 表单校验根据自己的需求不同，可以自己定义校验规则，从而更灵活的满足需求。
更多学习资料戳下方！！！
https://qrcode.ceba.ceshiren.com/link?name=article&project_id=qrcode&from=infoQ×tamp=1662366626&author=xueqi
评论