ElementUI点击按钮单独校验某个表单元素
应用场景:注册时,未输入手机号就点击【获取验证码】,此时应单独校验手机号对应的表单。
提示:validateField(‘需要单独校验的表单项规则’)
以下为HTML代码块:
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" >
<el-form-item label="手机号" prop="account">
<el-input v-model="ruleForm.account" clearable></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input
v-model="ruleForm.password"
type="password"
clearable=""
></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="cfmPwd">
<el-input
v-model="ruleForm.cfmPwd"
type="password"
clearable=""
></el-input>
</el-form-item>
<el-form-item label="验证码" prop="verificationCode">
<el-input
v-model="ruleForm.verificationCode"
type="password"
clearable=""
></el-input>
<el-button type="primary" @click="postSms"
>获取验证码</el-button
>
</el-form-item>
</el-form>
以下为JS代码块
<script>
export default {
data() {
var confirmPwd = (rule, value, callback) => {
if (value !== this.ruleForm.password) {
callback(new Error("两次输入的密码不一致"));
}
};
return {
ruleForm: { // 表单数据
account: "", // 手机号
password: "", // 密码
cfmPwd: "", // 确认密码
verificationCode: "", // 验证码
},
rules: { // 校验规则
account: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{
min: 11,
max: 11,
message: "手机号长度为11位",
trigger: "blur",
},
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{
min: 8,
max: 18,
message: "长度在 8 到 18 个字符",
trigger: "blur",
},
],
cfmPwd: [
{
required: true,
message: "请再次确认密码",
trigger: "blur",
},
{
min: 8,
max: 18,
message: "长度在 8 到 18 个字符",
trigger: "blur",
},
{
validator: confirmPwd,
trigger: "blur",
},
],
},
};
},
methods: {
/**
* 获取验证码
*/
postSms() {
this.$refs["ruleForm"].validateField("account"); // 此行单独校验form表单下的手机号表单项
},
}
};
</script>
以上内容均为原创,如有不足,还请指教