vee-validate 验证

安装 vee-validate

cnpm install vee-validate

创建zh_CN.js（内容复制即可）

export default {after: (field, [target]) => ` ${field}必须在${target}之后`,alpha_dash: (field) => ` ${field}能够包含字母数字字符，包括破折号、下划线`,alpha_num: (field) => `${field} 只能包含字母数字字符.`,alpha_spaces: (field) => ` ${field} 只能包含字母字符，包括空格.`,alpha: (field) => ` ${field} 只能包含字母字符.`,before: (field, [target]) => ` ${field} 必须在${target} 之前.`,between: (field, [min, max]) => ` ${field} 必须在${min} ${max}之间.`,confirmed: (field, [confirmedField]) => ` ${field} 不能和${confirmedField}匹配.`,date_between: (field, [min, max]) => ` ${field}必须在${min}和${max}之间.`,date_format: (field, [format]) => ` ${field}必须在在${format}格式中.`,decimal: (field, [decimals] = ['*']) => ` ${field} 必须是数字的而且能够包含${decimals === '*' ? '' : decimals} 小数点.`,digits: (field, [length]) => ` ${field} 必须是数字，且精确到 ${length}数`,dimensions: (field, [width, height]) => ` ${field}必须是 ${width} 像素到 ${height} 像素.`,email: (field) => ` ${field} 必须是有效的邮箱.`,ext: (field) => ` ${field} 必须是有效的文件.`,image: (field) => ` ${field} 必须是图片.`,in: (field) => ` ${field} 必须是一个有效值.`,ip: (field) => ` ${field} 必须是一个有效的地址.`,max: (field, [length]) => ` ${field} 不能大于${length}字符.`,mimes: (field) => ` ${field} 必须是有效的文件类型.`,min: (field, [length]) => ` ${field} 必须至少有 ${length} 字符.`,not_in: (field) => ` ${field}必须是一个有效值.`,numeric: (field) => ` ${field} 只能包含数字字符.`,regex: (field) => ` ${field} 格式无效.`,required: (field) => `${field} 是必须的.`,size: (field, [size]) => ` ${field} 必须小于 ${size} KB.`,url: (field) => ` ${field}不是有效的url.`
}

main.js 里添加

import VeeValidate, { Validator } from 'vee-validate'
// 引用中文提示
import zh from './components/vee-validate/zh'
Vue.use(VeeValidate, {locale: 'zh'
})
Validator.addLocale(zh)Validator.extend('phone', {messages: {zh: '请输入正确的手机或单位固话（格式：区号-电话）'},validate: value => {return value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value) || /^(\d{3}-)(\d{8})$|^(\d{4}-)(\d{7})$|^(\d{4}-)(\d{8})$/.test(value)}
})
Validator.extend('email', {messages: {zh: '请输入正确邮箱地址'},validate: value => {return /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/.test(value)}
})
const dict = {zh: {custom: {email: {required: '邮箱不能为空' // messages can be strings as well.},phone: {required: '手机不能为空'},company: {required: '公司名称不能为空'},uname: {required: '联系人不能为空'},duty: {required: '职务信息不能为空'},code: {required: '验证码不能为空'}}}
}Validator.updateDictionary(dict)

html里使用

<ul><li><span>联系姓名</span><input type="text" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('uname') }" name="uname" ref="name" class="inputSty" placeholder="请输入联系人姓名"><b>*</b></li><li v-show="errors.has('uname')" class="is-danger">{{ errors.first('uname') }}</li><li><span>联系电话</span><input type="text" v-validate="'required|phone'" :class="{'input': true, 'is-danger': errors.has('phone') }"  name="phone"  ref="tel" class="inputSty" placeholder="请输入手机或单位固话（格式：区号-电话）"><b>*</b></li><li v-show="errors.has('phone')" class="is-danger">{{ errors.first('phone') }}</li><li><span>联系邮箱</span><input type="text" v-validate="'required|email'" name="email" :class="{'input': true, 'is-danger': errors.has('email') }"  ref="mail" class="inputSty" placeholder="请输入联系邮箱"><b>*</b></li><li v-show="errors.has('email')" class="is-danger">{{ errors.first('email') }}</li>
</ul>

vee-validate 验证相关推荐

jQuery Validate验证框架详解
2019独角兽企业重金招聘Python工程师标准>>> 一.导入js库 <script type="text/javascript" src="& ...
使用RMAN VALIDATE验证数据和备份
在oracle中可以使用rman VALIDATE来检查数据库是否存在坏块,检测备份集是否有用, 特别是备份集,建议定期做VALIDATE 验证,避免备份失败造成数据库损失. 1.VALIDATE D ...
atitit.jQuery Validate验证框架详解与ati Validate 设计新特性
atitit.jQuery Validate验证框架详解与ati Validate 设计新特性 1. AtiValidate的目标1 2. 默的认校验规则1 2.1. 使用方式 1.metadata用 ...
弹出框页面中使用jquery.validate验证控件
弹出框页面中使用jquery.validate验证控件有几个问题需要解决: 1,弹出框的提交事件完成后如何关闭弹出框页面? 2,提交不成功如何返回当前页? 3,如果知道验证事件成功? 之前笔者都是JS ...
jQuery.Validate 验证,以及 remote验证, 多参数传递
jQuery.Validate 验证: http://www.runoob.com/jquery/jquery-plugin-validate.html 教程网址,很简单, 今天主要在这里记录一下re ...
为什么element ui 中表单验证validate验证成功不执行验证成功的逻辑代码
element ui 中表单验证validate验证成功不执行成功的逻辑代码首先今天做项目时遇到的一个问题,下面代码中,如果上面的验证规则通过但是不会执行验证通过的代码,只有验证不通过才会输出els ...
thinkphp5中Validate验证模板的使用和二次封装构建项目的验证层
thinkphp5中Validate验证类的使用和二次封装构建项目的验证层 1.thinkphp验证方法流程 2.封装验证层 1.thinkphp验证方法流程 $data=['id'=>'xia ...
laravel validate验证参数说明
文章目录 validate的介绍 validate的使用简单的表单验证关于数组数据的注意事项 validate验证参数说明 accepted active_url after:date after ...
jQuery（六）插件、Validate验证提交表单、submitHandler、更改错误信息显示的位置、required、Validator、内置验证方式表、validate ()的可选项汇总
jQuery(六)插件.Validate验证提交表单.submitHandler.更改错误信息显示的位置.required.Validator.内置验证方式表.validate ()的可选项汇总文章 ...
oracle数据库validate,使用RMAN VALIDATE验证数据和备份
在oracle中可以使用rman VALIDATE来检查数据库是否存在坏块,检测备份集是否有用, 特别是备份集,建议定期做VALIDATE 验证,避免备份失败造成数据库损失. 1.VALIDATE D ...

vee-validate 验证

vee-validate 验证相关推荐

最新文章

热门文章