element-ui使用过程中遇到的坑(一)
element-form使用时输入框输入不生效
使用的是vue3,我把表单数据和校验规则ruleForm,rules写在setup中了,一直输入无效,解决:使用reactive代替ref 包裹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>
部分代码:
setup(props, context) {
const myForm = ref(null)
const router = useRouter();
const ruleForm = reactive({
name:'',
password:'',
checkpass:''
})
}
输入框校验数字判断为字符串类型
数字类型的验证需要在 v-model 处加上 .number 的修饰符,这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符
<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 }
]
}