<template> <div> <div> <div> <input type="text" data-vv-name="mobile" v-model="mobile" v-validate="'required|mobile'" placeholder="手机号码" > </div> <div>{{errors.first('mobile')}}</div> </div> <div> <div> <input type="text" v-model="img_captcha" placeholder="图形验证码" v-validate="'required'" > </div> <div>{{errors.first('img_captcha')}}</div> </div> <div> <div> <input type="text" v-validate="'required|length:6'" v-model="sms_captcha" placeholder="短信验证码" > <button @click="handleSendSms">获取验证码</button> </div> <div>{{errors.first('sms_captcha')}}</div> </div> <div> <div> <input type="text" v-validate="'required|min:8'" v-model="password" placeholder="登录密码" ref="password" > </div> <div>{{errors.first('password')}}</div> </div> <div> <div> <input type="text" v-validate="'required|confirmed:password'" v-model="re_password" placeholder="再次输入登录密码" ></div> <div>{{errors.first('re_password')}}</div> </div> <div> <div> <input type="text" v-validate="'required|min:3|max:10'" v-model="nickname" placeholder="请输入昵称" ></div> <div>{{errors.first('nickname')}}</div> </div> <div> <div> <input type="text" v-validate="'required|id_card'" v-model="id_card" placeholder="请输入身份证号码" ></div> <div>{{errors.first('id_card')}}</div> </div> <div> <div> <input type="date" v-validate="'required|date_format:YYYY-MM-DD'" v-model="birthday" placeholder="请输入生日" ></div> <div>{{errors.first('birthday')}}</div> </div> <div> <div> <input type="text" v-validate="'required|url'" v-model="url" placeholder="请输入个人网址" ></div> <div>{{errors.first('url')}}</div> </div> <div> <div> <input type="text" v-validate="'required|email'" v-model="email" placeholder="请输入电子邮箱" ></div> <div>{{errors.first('email')}}</div> </div> <div> <div> <input type="text" v-validate="'required|between:18,60'" v-model="age" placeholder="请输入年龄" ></div> <div>{{errors.first('age')}}</div> </div> <div> <button @click="handleSubmit">注册</button> </div> </div> </template>
style 代码(这个是随便写的 原生css大家不要吐槽哈)
<style> .err { color: red; font-size: 12px; text-align: left; } .reg { width: 500px; margin: 0 auto; } .send_sms { position: relative; } .send_sms_btn { position: absolute; width: 100px; height: 30px; right: -11px; top: 2px; cursor: pointer; border: none; border-radius: 4px; background-color: #e4393c; outline: none; color: #fff; } .form_item { margin-bottom: 10px; width: 400px; } input { width: 400px; height: 30px; border: 1px solid #999; border-radius: 4px; outline: none; padding-left: 10px; } .reg_btn { width: 100px; height: 30px; border: none; border-radius: 4px; background-color: #e4393c; outline: none; cursor: pointer; color: #fff; } </style>
js
<script> import {messages} from '../validate/reg' export default { name: "reg", data() { return { url: '', age: '', email: '', birthday: '', id_card: '', nickname: '', mobile: '', img_captcha: '', sms_captcha: '', password: '', re_password: '', } }, mounted() { this.$validator.localize('zh_CN', messages); this.$validator.extend('mobile', { getMessage: field => '手机号有误', validate: value => { return /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value) } }); this.$validator.extend('id_card', { getMessage: field => '身份证号码格式有误', validate: value => { return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value) } }); }, methods: { handleSubmit() { this.$validator.errors.clear(); this.$validator.validateAll({ mobile: this.mobile, password: this.password, sms_captcha: this.sms_captcha, re_password: this.re_password, url: this.url, age: this.age, email: this.email, birthday: this.birthday, id_card: this.id_card, nickname: this.nickname, }).then((valid) => { console.log(valid); if (true === valid) { console.log('验证通过'); } else { console.log(this.$validator.errors.all()); } }); }, handleSendSms() { this.$validator.errors.clear(); this.$validator.validateAll({ mobile: this.mobile, img_captcha: this.img_captcha }).then((valid) => { console.log(valid); if (true === valid) { console.log('验证通过'); } else { console.log(this.$validator.errors.all()); } }); } } } </script>
外部引入的js (自定义提示内容)