新增用户信息常用的验证规则，包括自定义的验证规则

最新推荐文章于 2024-10-09 21:20:29 发布

vegaGao

最新推荐文章于 2024-10-09 21:20:29 发布

阅读量227

点赞数 3

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/vegaGao/article/details/140014477

版权

需要注意的是，在el-form上加:rules="rules" ref="formConRef"。

每一个el-form-item上都需要添加相应的prop信息。

自定义验证规则时，每个判断都需要调用callback函数，必须写else部分。

<el-form :model="formCon" :rules="rules" ref="formConRef" label-width="100px">
				<el-form-item label="用户名" prop="adminName">
					<el-input v-model="formCon.adminName" clearable></el-input>
				</el-form-item>
				<el-form-item label="手机号" prop="phoneNumber">
					<el-input v-model="formCon.phoneNumber" maxlength="11"
						clearable></el-input>
				</el-form-item>
				<el-form-item label="性别" prop="gender">
					<el-radio-group v-model="formCon.gender">
						<el-radio label="男">男</el-radio>
						<el-radio label="女">女</el-radio>
					</el-radio-group>
				</el-form-item>
                <el-form-item label="手机邮箱" prop="email">
					<el-input v-model="formCon.email"
						clearable></el-input>
				</el-form-item>
				<el-form-item label="权限" prop="permission">
					<el-select v-model="formCon.permission" placeholder="请选择权限">
						<el-option label="管理员" value="0"></el-option>
						<el-option label="普通用户" value="user"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div class="btnRight">
				<el-button size="small" type="primary"  @click="makeAddMessage()">确认</el-button>
			</div>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
                formCon: {},
				rules: {
					adminName: [{required: true,message: '请输入用户名',trigger: 'blur'}],
					phoneNumber: [
						{required: true,message: '请输入手机号',trigger: 'blur'},
						{pattern: /^[0-9]{11}$/,message: '手机号格式不正确',trigger: 'blur'},
						{validator:this.validateUniquePhoneNumber,trigger:'blur'}
					],
                    email:[
                      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                    ],
					gender: [{required: true,message: '请选择性别',trigger: 'change'}],
					permission: [{required: true,message: '请分配权限',trigger: 'change'}],
				},
            }
        },
        methods:{
            makeAddMessage() { //新增
				this.$refs.formConRef.validate((valid) => {
					if (valid) {
						let params = 接口地址;
						//postAsync为自定义调用接口方式
						this.$network.postAsync(params,this.formCon).then((res)=>{
                            if(res.data == true){
							    this.$message({
								    type: 'success',
								    message: '添加成功!'
							    });
                            }
						})
					} else {
						return false
					}
				})
			},
            validateUniquePhoneNumber(rule,value,callback){
				if (!/^[0-9]{11}$/.test(value)) {
				     callback(new Error('请输入正确格式的手机号'));
				} else if (this.existingPhoneNumbers.some(phone => phone !==  this.currentEditingPhoneNumber && phone === value)) {
				     callback(new Error('您输入的手机号已被注册'));
				} else {
				     callback(); // 验证通过，必须调用 callback() 并且不带参数
				 }
			},
        }
    }
</script>