dsf5.0 element ui表单相关验证

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="126px" class="demo-ruleForm"><el-form-item label="登录密码" prop="password"><el-input v-model="ruleForm.password"></el-input></el-form-item><el-form-item label="确认密码" prop="confirmPassword"><el-input v-model="ruleForm.confirmPassword"></el-input></el-form-item><el-form-item label="姓名" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="身份证号" prop="IDcard"><el-input v-model="ruleForm.IDcard"></el-input></el-form-item><el-form-item label="性别" prop="sex"><el-radio-group v-model="ruleForm.sex"><el-radio label="男"></el-radio><el-radio label="女"></el-radio></el-radio-group></el-form-item><el-form-item label="是否地方专家库专家" prop="isexpert"><el-select v-model="ruleForm.isexpert" placeholder="请选择"><el-option label="是" value="1"></el-option><el-option label="否" value="0"></el-option></el-select></el-form-item><el-form-item label="选择省份" v-show="ruleForm.isexpert == 1"><dsf-view-part path="/pc/nc/userinfo/sublist" style="height: 300px"></dsf-view-part></el-form-item><el-form-item label="工作单位" prop="unit"><el-input v-model="ruleForm.unit"></el-input></el-form-item><el-form-item label="工作单位统一社会信用代码" prop="code"><el-input v-model="ruleForm.code"></el-input></el-form-item><el-form-item label="单位所在地" prop="address"><el-input v-model="ruleForm.address"></el-input></el-form-item><el-form-item label="手机号" prop="phone"><el-input v-model="ruleForm.phone"></el-input></el-form-item><el-form-item label="验证码" prop="phoneCode" class="codeInput-item"><el-input v-model="ruleForm.phoneCode" class="codeInput"></el-input><img v-if="imgCode" :src="imgCode" alt="" class="img-code" @click="getImgCode()" /></el-form-item><el-form-item label="电子邮箱" prop="email"><el-input v-model="ruleForm.email"></el-input></el-form-item><el-form-item><el-button class="subBtn" type="primary" @click="onSubmit('ruleForm')">注册</el-button></el-form-item></el-form>

// 中名验证
var chnName = (rule, value, callback) => {if (!value) {callback(new Error("请输入中文名"));} else {const reg = /^[\u4e00-\u9fa5]+$/;if (value.length < 100 && reg.test(value)) {callback();} else {return callback(new Error("请输入正确的中文名"));}}
};
// 身份证
var checkIdNum = function (rule, value, callback) {const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;if (!value) {return callback(new Error("证件号码不能为空"));} else if (!reg.test(value)) {return callback(new Error("证件号码不正确"));} else {callback();}
};
// 手机号
var validatorPhone = function (rule, value, callback) {if (value === "") {callback(new Error("手机号不能为空"));} else if (!/^1\d{10}$/.test(value)) {callback(new Error("手机号格式错误"));} else {callback();}
};data() {// 密码const ToPassword = (rule, value, callback) => {if (value === "") {callback(new Error("密码不能为空"));} else if (!/^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(.{8,20})$/.test(value)) {callback(new Error("密码设置8到20位,必须包含大写字母、小写字母、数字"));} else {callback();}};// 确认密码const equalToPassword = (rule, value, callback) => {console.log(666);if (this.ruleForm.password !== value) {callback(new Error("两次输入的密码不一致"));} else {callback();}};
}

rules: {password: [{ required: true, message: "请输入密码", trigger: "blur" },{ required: true, validator: ToPassword, trigger: "blur" },// { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },],confirmPassword: [{ required: true, message: "确认密码不能为空", trigger: "blur" },{ required: true, validator: equalToPassword, trigger: "blur" },],name: [{ required: true, validator: chnName, message: "请输入姓名", trigger: "blur" },// { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },],IDcard: [{ required: true, validator: checkIdNum, message: "请输入身份证号", trigger: "blur" }],sex: [{ required: true, message: "请选择性别", trigger: "change" }],isexpert: [{ required: true, message: "请选择", trigger: "change" }],unit: [{ required: true, message: "请输入工作单位", trigger: "blur" }],code: [{ required: true, message: "请输入工作单位统一社会信用代码", trigger: "blur" }],address: [{ required: true, message: "请输入单位所在地", trigger: "blur" },{ min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },],phone: [{ required: true, validator: validatorPhone, message: "请输入手机号", trigger: "blur" }],phoneCode: [{ required: true, message: "请输入验证码", trigger: "blur" },{ min: 4, max: 4, message: "请输入4位数字的验证码", trigger: "blur" },],email: [{ type: "email", required: true, message: "请输入邮箱", trigger: "blur" }],},

20220314扩展

//  密码长度不少于8位，且数字、字母、特殊字符中的两者以上组合var pwdReg = /^(?!\d+$)(?!^[a-zA-Z]+$)(?!^[_#@]+$).{8,30}/;

dsf5.0 element ui表单相关验证相关推荐

element UI 表单自定义验证，css水平且垂直居中方法
element UI 表单自定义验证 element UI提供了一种内部的表单验证,但是这种方法不能够来进行复杂的验证,如邮箱,手机号等的验证需要用到自定义验证首先是element UI 提供的基础 ...
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
vue 3.0记录Element UI 表单使用(看了隔壁小孩儿都会用的Element UI 表单组件使用)
Element UI 表单使用记录 element ui 表单 input 文本域日期选择中国标准时间与xxxx-xx-xx格式时间之间的来回切换中国标准时间转换为xxxx-xx-xx格式 ...
vue+element ui表单校验（邮箱、电话、工商信息）
vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...
form generator ——Element UI表单设计及代码生成器
form generator Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中. 网站地址:https://mrhj.gitee.io/form-ge ...
element ui 表单验证残留提示处理
问题:如果vue的同一个页面拥有两个表单.验证第一个表单时没有通过就切换到第二个,那么第二个表单会出现验证错误的信息点击编辑框解决方法:添加表单重置验证我们可以通过为两个表单添加ref属性之后 ...
element ui表单验证，验证通过但是不进if(valid){}步骤
表单自定义验证,如图: data中定义的验证规则: var validatePass = (rule, value, callback) => {if (value === '') {retur ...
element ui 表单验证通过后没有绿色框求解（已解）
使用element自带的表单验证. 输入框选中状态边框为蓝色, 输入框输入错误的时候边框为红色, 输入正确的时候边框为绿色. 但是有的时候输入正确没有出现绿色(红色和蓝色状态能正常出现) 我的相关代码 ...
element ui 表单验证为正整数
很多时候都会用表单中输入正整数的情况,在element ui中可以用el-input-number 标签来显示输入框是number类型的,或者type="number"也可以的,但 ...
Element UI——表单验证输入的数字检测出来是string解决方案
问题描述打印判断类型问题分析解决方案数字类型的验证需要在 v-model 处加上 .number 的修饰符,这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符. < ...

dsf5.0 element ui表单相关验证

20220314扩展

dsf5.0 element ui表单相关验证相关推荐

最新文章

热门文章