使用element-ui组件库如何进行表单验证：
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可
| 规则 | 说明 |
|---|---|
| required | 如果为true，表示该字段为必填 |
| message | 当不满足设置的规则时的提示信息 |
| pattern | 正则表达式，通过正则验证值 |
| min | 当值为字符串时，min表示字符串的最小长度，当值为数字时，min表示数字的最小值 |
| max | 当值为字符串时，max表示字符串的最大长度，当值为数字时，max表示数字的最大值 |
| trigger | 校验的触发方式，change（值改变） / blur （失去焦点）两种， |
| validator | 如果配置型的校验规则不满足你的需求，你可以通过自定义函数来完成校验 |
form表单提供了一份API方法，我们可以对表单进行完整和部分校验
| 方法名 | 说明 | 参数 |
|---|---|---|
| validate | 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise | Function(callback: Function(boolean, object)) |
| validateField | 对部分表单字段进行校验的方法 | Function(props: array / string, callback: Function(errorMessage: string)) |
| resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | — |
| clearValidate | 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果 | Function(props: array / string) |
<template>
<div id="app">
<el-card class="box-card">
<el-form
label-width="100px"
style="margin-top: 20px"
:model="ruleForm"
:rules="loginRules"
ref="formLogin"
>
<el-form-item prop="mobile" label="手机号">
<el-input v-model="ruleForm.mobile" maxlength="11"></el-input>
</el-form-item>
<el-form-item prop="password" label="密码">
<el-input v-model="ruleForm.password" type="password"></el-input>
</el-form-item>
<el-form-item prop="passwordIsOk" label="确认密码">
<el-input v-model="ruleForm.passwordIsOk" type="password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">注册</el-button>
<el-button @click="resetFields">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
name: "loginForm",
data() {
return {
ruleForm: {
mobile: "",
password: "",
passwordIsOk: "",
},
loginRules: {
// 定义验证规则
// required：是否必传 message：提示信息 trigger：触发方式 blur(失去焦点触发) change(值改变触发)
// pattern：正则表达式验证 min：最小位数 max：最大位数 validator：函数体可以自定义规则
mobile: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{
pattern: /^1[3-9]\d{9}$/,
message: "请输入正确手机号",
trigger: "blur",
},
// 自定义验证规则 参数1：当前规则 参数2：当前值 参数3：回调函数
// {
// trigger: "blur",
// validator: (rule, value, callback) => {
// // 验证第三位必须是9
// value.charAt(2) === "9"
// ? callback()
// : callback(new Error("第三位手机号必须是9"));
// },
// },
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 6, max: 12, message: "请输入6-12位密码", trigger: "blur" },
],
passwordIsOk: [
{
required: true,
message: "请输入确认密码",
trigger: "blur",
},
{
trigger: "blur",
validator: (rule, value, callback) => {
if (this.ruleForm.password === value) {
return;
} else {
callback(new Error("两次输入的密码不一致"));
}
},
},
],
},
};
},
methods: {
resetFields() {
this.$refs.formLogin.resetFields();
},
},
};
</script>
<style lang="less" scoped>
#app {
width: 100%;
height: 100vh;
background-color: skyblue;
display: flex;
justify-content: center;
align-items: center;
.box-card {
width: 480px;
height: 300px;
}
}
</style>
