Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator
<el-form :model="ruleForm" :rules="rules">
<el-form-item label="账号" placeholder="账 号" prop="username">
<el-input size="medium" style="margin:10px 0" prefix-icon="el-icon-user" v-model="ruleForm.username" class="login-item" /> </el-form-item>
<el-form-item label="密码" placeholder="密 码" prop="password">
<el-input size="medium" style="margin:10px 0" prefix-icon="el-icon-lock" v-model="ruleForm.password" type="password" class="login-item" />
</el-form-item></el-form>
data() {
return {
ruleForm:{
username:'',
password: ''
},
rules:{
username:[
{required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 0, max: 8, message: '长度在 0 到 8 个字符', trigger: 'blur' }
],
password:[
{required: true, message: '请输入密码'},
{min:0,max:8,message:'长度在0到8个字符'}
]
依靠如下关键的地方
<el-form :model=”ruleForm” :rules=”rules”>
<el-form-item prop="username">
<el-input v-model="ruleForm.username">
</el-form-item>
</el-form>
data() {
return {
ruleForm:{
username:'',
password: ''
},
rules:{
username:[
{required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 0, max: 8, message: '长度在 0 到 8 个字符', trigger: 'blur' }
],
password:[
{required: true, message: '请输入密码'},
{min:0,max:8,message:'长度在0到8个字符'}
]
//blur 的作用是当有请输入用户名出现的时候，输入了后会这字会消失
此时记得向后端发送请求时的用户名和密码是 ruleForm.username,密码是ruleForm.password
标签：username,功能,验证,rules,表单,ruleForm,blur,message,password From： https://www.cnblogs.com/wonder-question/p/18011443