vue+Element表单验证+数字英文密码和手机号验证（详细）

项目开发时需要用到表单验证，密码验证和手机验证都是使用正则表达式，特此记录一下。

1.表单图

2.代码

<template><!-- 结构 -->  //就是你要输入的名称<el-dialogtitle="//":visible.sync="dialogVisible"width="50%":before-close="handleClose"><el-form:model="ruleForm":rules="rules"ref="ruleForm"label-width="120px"class="demo-ruleForm"><el-form-item label="//" prop="region"><el-selectv-model="ruleForm.region"placeholder="请选择账号类"@change="selectiveType"><el-optionv-for="item in myOptions":key="item.id":label="item.name":value="item.id"></el-option></el-select></el-form-item><el-form-item label="//" prop="tenant"><el-selectv-model="ruleForm.tenant"placeholder="请选择商户"filterablev-if="AccountId == 3"@change="SelectMerchant"><!-- 集团 --><el-optionv-for="item in group":key="item.group_id":label="item.group_name":value="item.group_id"></el-option></el-select><el-selectv-model="ruleForm.tenant"placeholder="请选择商户"filterablev-else@change="SelectMerchant"><!-- 站点 --><el-optionv-for="item in site":key="item.stid":label="item.stname":value="item.stid"></el-option></el-select></el-form-item><el-form-item label="//" prop="shID"><b>{{ ruleForm.shID }}</b></el-form-item><el-form-item label="//" prop="atPresent"><span>{{ruleForm.atPresent}}</span></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="account"><el-input placeholder="请输入内容" v-model="ruleForm.account" @change='SelectAccount'><template slot="prepend">{{ ruleForm.default }}</template></el-input></el-form-item><el-form-item label="手机号码" prop="phoneNumber"><el-inputv-model="ruleForm.phoneNumber"placeholder="请输入手机号码"></el-input></el-form-item><el-form-item label="登录密码" prop="password"><el-input@change="importMiMa"v-model="ruleForm.password"placeholder="请输入密码"></el-input><div>密码需要10位数及以上,同时包含英文字母和数字</div></el-form-item><el-form-item label="确认密码" prop="confirmPassword"><el-input@change="affirmMiMa"v-model="ruleForm.confirmPassword"placeholder="请确认密码"></el-input></el-form-item><div class="cj"><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button><el-button @click="resetForm('ruleForm')">取消</el-button></el-form-item></div></el-form></el-dialog>
</template>
<script>
export default {data () {return {ruleForm: {//form表单name: '',region: '',tenant: '',shID: '',account: '',phoneNumber: '',password: '',confirmPassword: '',atPresent:'',//当前选择的商户default: 'admin@'},rules: {//表单验证name: [{ required: true, message: '请输入//', trigger: 'blur' }//   { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],region: [{ required: true, message: '请选择//', trigger: 'change' }],tenant: [{ required: true, message: '请选择//', trigger: 'change' }],account: [{ required: true, message: '请输入//', trigger: 'change' }],phoneNumber: [{ required: true, message: '请输入手机号码', trigger: 'change' },{trigger: 'blur',validator: (rule, value, callback) => {var passwordreg = /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/console.log(passwordreg.test(value))if (!passwordreg.test(value)) {callback(new Error('请输入正确的手机号码哦!'))} else {callback()}}}],password: [{ required: true, message: '请输入密码', trigger: 'change' },{ min: 10, message: '密码最少10位数哦', trigger: 'blur' },{trigger: 'blur',validator: (rule, value, callback) => {var passwordreg = /(?![A-Z]*$)(?![a-z]*$)(?![0-9]*$)(?![^a-zA-Z0-9]*$)/console.log(passwordreg.test(value))if (!passwordreg.test(value)) {callback(new Error('密码必须由大写字母、小写字母、数字、特殊符号中的2种及以上类型组成!'))} else {callback()}}}],confirmPassword: [{ required: true, message: '请再次确认密码', trigger: 'change' }]}
}
</script>

效果

vue+Element表单验证+数字英文密码和手机号验证（详细）相关推荐

【VUE 表单验证】vue Element 表单验证中多层v-for验证方法
vue Element 表单验证中对象有list列表如何验证正常情况下只需要<el-form-item> 标签中填入prop数据属性即可. <el-form-item label ...
vue+element表单校验
1.字母数字组合 export function numberSrting(rule, value, callback) { if (!value) { callback(); } else { le ...
Vue+Element UI 下，如何给一个表单设置自定义规则或多个验证规则（：rules）
依旧是公司里那个Vue+Element UI的项目.今天遇到了一个新的问题:表单中某个选择器的值不同,控制着下面表单内容是否显示. 大概就是这个样子.由后台返回的"发放方式"的数值 ...
关于Vue的表单验证
前言最近在研究 Vue 如何实现表单的验证,在网上查阅资料以后,简单将这些方法整合一下,方便以后学习.如果有不准确之处,还望指正. Vue 实现表单验证的方法有如下几种: 一.基于 Vue 与 jQ ...
Element 表单只能输入数字校验
Element 表单只能输入数字校验以下验证均为只能输入数字类型只能输入整数 <el-input v-model="value" placeholder="请输 ...
Element 表单的 rules 验证 Number
在使用 Element 表单的时候,验证数字是很正常的需求. Element的表单验证用的是 async-validator ,查看可以设置 type 来进行验证 number ,我最初使用的如下: ...
Element表单验证（2）
Element表单验证(2) 上篇讲的是async-validator的基本要素,那么,如何使用到Element中以及怎样优雅地使用,就在本篇. 上篇讲到async-validator由3大部分组成 ...
vue监控表单输入事件，正则验证手机号，邮箱
vue监控表单输入事件,正则验证手机号,邮箱 <div class="input-name"><inputclass="input-type" ...
Vant-UI 表单组件（Field组件）：验证表单元素表单提交 - 踩坑篇
Vant-UI 表单组件(Field组件):验证表单元素&&表单提交: 示例截图 · 如下: 示例 · 详细代码 · 如下: <template><div class ...

vue+Element表单验证+数字英文密码和手机号验证（详细）

vue+Element表单验证+数字英文密码和手机号验证（详细）相关推荐

最新文章

热门文章