在vue项目中使用Element-ui如何制作一个注册登录表单?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
登录注册表单验证
通过Element-ui的表单实现登录注册的表单验证
效果图如下
注册
登录表单
登录的实现,需要通过手机号或者邮箱进行登录,验证手机号或者邮箱符合要求
// 登录表单验证的代码 // template的代码//script的代码 // 两个验证,验证密码不能为空,验证,手机号或者邮箱是否符合要求 data() { var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')) } else { callback() } } var validateUser = (rule, value, callback) => { if (value === '') { callback(new Error('手机号或者邮箱不能为空')) } else { const reg = /^1[3|4|5|7|8][0-9]\d{8}$/ // eslint-disable-next-line no-useless-escape const reg2 = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/ if ((reg.test(value) || reg2.test(value))) { callback() } else { callback(new Error('请输入正确的手机号或者邮箱')) } } } return { // 获取url地址后面的参数 urlQuery: '', activeIndex: '1', ruleForm: { pass: '', user: '' }, rules: { user: [{ required: true, validator: validateUser, trigger: 'blur' }], pass: [{ required: true, validator: validatePass, trigger: 'blur' }] } } }, 登录