element-ui表单验证例子：validateField验证
2022-10-09 本文已影响0人
Frank_Fang
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>elementUI</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
#app {
width: 600px;
margin: 30px;
}
</style>
</head>
<body>
<div id="app">
<el-form :model="myModel" :rules="rules" ref="myForm" size="small" label-width="100px">
<el-form-item label="姓名" prop="name">
<el-input v-model="myModel.name" clearable></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="myModel.email" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button type="warning" size="medium" @click="validateEmail('myForm')">验证字段</el-button>
<el-button type="primary" size="medium" @click="submitForm('myForm')">验证全部</el-button>
</el-form-item>
</el-form>
</div>
<script>
new Vue({
el: "#app",
data: {
myModel: {
name: '',
email: ''
},
rules: {
name: {
required: true,
message: '请输入姓名',
trigger: ['change', 'blur']
},
email: {
required: true,
message: '请输入邮箱',
trigger: ['change', 'blur']
}
}
},
methods: {
validateEmail(formName) {
this.$refs[formName].validateField('email', emailError => {
if (!emailError) {
alert('邮箱验证通过!');
} else {
console.log('邮箱验证失败');
return false;
}
});
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
})
</script>
</body>
</html>
