Pitfalls encountered during the use of element-ui (1)
The input box input does not take effect when element-form is used.
I use vue3. I wrote the form data and verification rules ruleForm and rules in the setup. The input is invalid all the time. Solution: use reactive instead of ref to wrap ruleForm.
<el-form class="content" :model="ruleForm" :rules="rules" ref="myForm" label-width="120px" >
<el-form-item class="name" label="手机号:" prop="name" >
<el-input placeholder="请输入手机号" v-model.number="ruleForm.name" clearable autocomplete="off"></el-input>
</el-form-item>
<el-form-item class="=passwords" label="密码：" prop="password" >
<el-input placeholder="请输入密码" clearable v-model="ruleForm.password" show-password ></el-input>
</el-form-item>
<el-form-item class="=confirm" label="确认密码：" prop="checkpass">
<el-input placeholder="请再次输入密码" clearable v-model="ruleForm.checkpass" show-password ></el-input>
</el-form-item>
<el-form-item>
<el-button-group>
<el-button type="success" class="confirm-btn" @click="submitForm">确认</el-button>
<el-button type="info" class="cancel-btn" @click="resetForm">取消</el-button>
</el-button-group>
</el-form-item>
</el-form>
Part of the code:
setup(props, context) {
const myForm = ref(null)
const router = useRouter();
const ruleForm = reactive({
name:'',
password:'',
checkpass:''
})
}
The input box verification number is judged to be of string type.
Numeric type verification requires adding the .number modifier to v-model. This is the modifier provided by Vue itself to convert the bound value into the number type.
<el-form-item class="name" label="手机号:" prop="name" >
<el-input placeholder="请输入手机号" v-model.number="ruleForm.name" clearable autocomplete="off"></el-input>
</el-form-item>
const rules = {
name: [
{
required: true, trigger: 'blur', validator: checkName, },
],
password: [
{
required: true, trigger: 'blur', validator: validatePass },
],
checkpass: [
{
required: true, trigger: 'blur', validator: validatePass2 }
]
}