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>