element-ui使用过程中遇到的坑（一）

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 } 
            ]
            }