页面组件使用

此处使用AntDesign的表单组件作为示例，element-ui实现方式同理
使用rules属性绑定校验规则，item中用prop属性绑定校验规则中的项

<template>
	<div>
		<a-form-model
			:model="userData"
			:label-col="labelCol"
			:wrapper-col="wrapperCol"
			:rules="rules"
			ref="ruleForm"
			>
			<a-form-model-item label="人员名称:" prop="name">
				<a-input v-model="userData.name" placeholder="请输入人员名称" />
			</a-form-model-item>
			<a-form-model-item label="人员账号:" prop="account">
				<a-input v-model="userData.account" placeholder="请输入账号" />
			</a-form-model-item>
			<a-form-model-item label="手机号码:" prop="mobile">
				<a-input v-model="userData.mobile" placeholder="请输入手机号码" />
			</a-form-model-item>
			<a-form-model-item label="电子邮件:" prop="email">
				<a-input v-model="userData.email" placeholder="请输入电子邮件" />
			</a-form-model-item>
		</a-form-model>
		<a-button type="primary" @click="onSubmit">保存</a-button>
	</div>
</template>

正则表达式实现

<script>
export default {
  data() {
    // 表单校验方法
    const checkAccount = (rule, value, callback) => {
      const regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im
      const regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im
      if (regEn.test(value) || regCn.test(value)) {
        callback(new Error('不能包含特殊字符'))
      }else {
        callback()
      }
    }
    const checkMobile = (rule, value, callback) => {
      const regCN = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if (!regCN.test(value)) {
        callback(new Error('手机号格式不正确'))
      } else {
        callback()
      }
    }
    const checkMail = (rule, value, callback) => {
      const regCN = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/
      if (!regCN.test(value)) {
        callback(new Error('邮箱格式不正确'))
      } else {
        callback()
      }
    }
    return {
      userData: {
		name:'',
		account:'',
		mobile:'',
		email:'',
	  },
      rules: {
        name: [{ required: true, message: '请输入人员名称', trigger: 'blur' }],
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { validator: checkAccount, trigger: 'blur' }
        ]
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: checkMobile, trigger: 'change' }
        ],
        email: [
          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
          { validator: checkMail, trigger: 'change' }
        ]
        //trigger 说明 blur:失去焦点触发校验,change：值改变时触发
        // { validator: checkMail, trigger:['blur','change'] } 两种情况下都触发
      }
    }
  },
  methods: {
    onSubmit() {
      const that = this
      //校验表单规则
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          that.saveUserData()
        }
      })
    },
    saveUserData(){
    	//保存用户信息
    	//其他代码
		this.$refs['ruleForm'].resetFields()
	}
  }
}
</script>

密码复杂度

【推荐】【JS】JS校验密码复杂度（必须包含字母、数字、特殊符号）

js正则表达式:密码至少8位，要求必须字母、数字加英文符号