vue3.0 实现element-form 表单校验和提交

vue3.0 实现element-form 表单校验和提交

vue3.0+element-plus的form表单：

<template>
    <el-container>
        <el-header>
            <Header title="注册" :showBack= "true"></Header>
        </el-header>
     <el-main>
         <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>           
     </el-main>
    </el-container>
</template>
<script>
import Header from '../components/Header.vue'
import {  reactive, ref, unref } from 'vue'
import { useRouter } from 'vue-router'
export default ({
    components:{
        Header
    }, 
    setup(props, context) {
        const myForm = ref(null)
         const router = useRouter();
        const ruleForm = reactive({
            name:'',
            password:'',
            checkpass:''
        })
        const rules = {
            name: [
                { required: true, trigger: 'blur', validator: checkName, },
            ],
            password: [
                { required: true, trigger: 'blur', validator: validatePass },
            ],
            checkpass: [
                { required: true,  trigger: 'blur', validator: validatePass2 } 
            ]
            }
      function checkName (rule, value, callback) {
        if (!value) {
          return callback(new Error('不能为空'));
        }
        setTimeout(() => {
          var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
            if (!myreg.test(value)) {
              callback(new Error('请输入正确的手机号'));
            } else {
              callback();
            }
        }, 1000);
      };
      function  validatePass(rule, value, callback){
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (ruleForm.checkpass !== '') {
            ruleForm.validateField('checkpass');
          }
          callback();
        }
      }
       function validatePass2 (rule, value, callback) {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
        const submitForm = () => {
              const form = unref(myForm)
                try {
                 let res = form.validate()
                 if (res){
                        router.push({ name: 'Admin' })  
                   }   
                } catch (error){
                  alert('error submit!!')
                }               
            }
     function resetForm() {
          const form = unref(myForm)
           form.resetFields();
      }  
        return {
             myForm, ruleForm, rules, validatePass, validatePass2, checkName, submitForm, resetForm
        }
    }
})
</script>
<style scoped>
 .el-header{
    background-color: #080e16;
    color: rgb(241, 235, 235);
    text-align: center;
    line-height: 60px;
    font-size:24px;
  }
  .el-input{
    width: 10rem;
  }
  .content{
      padding-top: 100px;    
  }
  .el-button{
      font-size: 14px;
      height: 2rem;
      margin-top: 1rem;
  }
 
 
</style>