el-form 组件:model="ruleForm" ruleForm是data中定义的存储的是用户名和密码值的对象 通过model传给el-form组件 :rules="rules" rules是data中定义的对象目的是校验用户名和密码的规则 ref="ruleForm" 咱们可以通过ref来获取el-form组件内部的方法 比如:validate校验方法 resetFields重置方法 status-icon 是在表单校验错误的时候 输入框中出现的提示小图标 label-width="200px" 是用来控制用户名和密码文本的宽度
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">
label 控制输入框的文本 prop="username" 是对应表单域model中的username字段规则的名字需要和表单域model中的字段一模一样
<el-form-item label="用户名" prop="username">
v-model 里面对应的是data中的数据
<el-input v-model="ruleForm.username"></el-input>
autocomplete="off" 作用是把输入框的自动提示功能关闭
<el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
提交的时候把ref里面的名字传过去,目的是为了使用refs方法来调用el-form里面的validate校验方法
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
重置的时候把ref里面的名字传过去,目的是为了使用refs方法来调用el-form里面的resetFields重置方法
<el-button @click="resetForm('ruleForm')">重置</el-button>
简易的表单验证方法
data() {
var checkUser = (rule, value, callback) => {
console.log('用户名:',value)
if(value.trim()==''){
callback(new Error('请输入用户名'));
}
else if(!/^[0-9a-zA-Z_\u4e00-\u9fa5]{5,10}$/.test(value)){
callback(new Error('用户名为5-10位中英文数字或者下划线'));
}
else{
callback();
}
};
var validatePass = (rule, value, callback) => {
console.log('密码:',value)
if (value.trim()=='') {
callback(new Error('请输入密码'));
}else{
callback();
}
};
return {
ruleForm: {
password: '',
username: ''
},
rules: {
password: [
{ validator: validatePass, trigger: 'blur' }
],
username: [
{ validator: checkUser, trigger: 'blur' }
]
}
};
},
提交和重置的方法:
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
/* el-form组件的validate方法 在回调函数中
如果valid为true 则表示表单校验通过
为false则表示不通过 */
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
/* 通过vue中的$refs方法来调用组件el-form中的resetFields方法 实现重置 */
this.$refs[formName].resetFields();
}
}