vue中rules下拉框验证,vue 表单检验
这篇文章主要介绍了某视频剪辑软件使用规则对表单字段进行校验的步骤，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
在实际开发过程中，发现以下的写法比较累赘，因为在后面的项目中，继续优化表单验证的方法，让代码更简洁。主要的修改是验证方法的修改和调用
以前验证表单字段的最大长度，描述：[{ max: 200，消息： 最大长度为200个字符，触发器：模糊 }]
现在写法：描述：[有效长度(200)]
其中，有效长度是我封装的一个方法。
使用步骤：
1、在uitls文件夹中新建一个验证。射流研究…文件。
2、定义需要验证的方法
3、在需要使用的页面中引入从@/utils/validate 导入{ validateLen，validateChart_ }
4、在用于校验的规则中使用。例如：描述：[有效长度(200)]
具体写法：参考如下。只是把旧的写法统一封装成了返回进行输出。少写很多代码，省事整洁
//是否必填
导出函数validateNecessary(tipInfo=请输入，trigger=blur ，isNeces=true，){
返回{
必选：isNeces，
消息：tipInfo，
引发
}
}
//验证最大长度
导出函数validateLen(len=20) {
返回{
麦克斯：莱恩，
消息： 最大长度为伦个字符，
触发器："模糊"
}
}
基于元素-用户界面
1、在代码中，添加属性*规则
El-form:model= form :rules= rules ref= form label-width= 150 px /El-form
并且，在埃尔-表单-项目中添加支柱属性，对应规则中的规则
2、新开一个文件夹（验证。js)定义验证规则
3、在页面(index.vue)中引入验证规则定义的文件，并在导出默认值中定义规则规则，使用语法：{验证器：验证方法，触发器：验证触发}
4、以下是验证器。射流研究…文件的部分验证方法
/*是否合法互联网协议(互联网协议)地址*/
导出函数有效IP(规则，值，回调){
if(value== value==undefined value==null){
回调();
}否则{
常量=/^(\d{1,2}1\d\d2[0-4]\d25[0-5])\.(\d{1，2}1\d\d2[0-4]\d25[0-5]).(\d{1，2}1\d\d2[0-4]\d25[0-5]).(\d{1，2 } 1 \ d \ d 2[0-4]\ d 25[0-5])$/；
如果((!注册测试(值))值！=) {
回调（新错误(请输入正确的互联网协议(互联网协议)地址));
}否则{
回调();
}
}
}
/* 是否手机号码或者固话*/
导出函数有效电话二(规则，值，回调){
const reg=/^((0\d{2,3}-\d{7,8})(1[34578]\d{9}))$/；
if(value== value==undefined value==null){
回调();
}否则{
如果((!注册测试(值))值！=) {
回调（新错误(请输入正确的电话号码或者固话号码));
}否则{
回调();
}
}
}
/* 是否固话*/
导出函数有效电话(规则，值，回调){
const reg=/0\d{2}-\d{7，8 }/；
if(value== value==undefined value==null){
回调();
}否则{
如果((!注册测试(值))值！=) {
回调（新错误(请输入正确的固话（格式：区号号码，如010-1234567)));
}否则{
回调();
}
}
}
/* 是否手机号码*/
导出函数有效电话(规则，值，回调){
const reg=/^[1][3,4,5,7,8][0-9]{9}$/；
if(value== value==undefined value==null){
回调();
}否则{
如果((!注册测试(值))值！=) {
回调（新错误(请输入正确的电话号码));
}否则{
回调();
}
}
}
/* 是否身份证号码*/
导出函数有效id号(规则，值，回调){
const reg=/(^\d{15}$)(^\d{18}$)(^\d{17}(\dxx)$)/；
if(value== value==undefined value==null){
回调();
}否则{
如果((!注册测试(值))值！=) {
回调（新错误(请输入正确的身份证号码));
}否则{
回调();
}
}
}
/* 是否邮箱*/
导出函数验证电子邮件(规则，值，回调){
const reg=/^([a-zA-Z0-9] [-_\ .]?)@[a-zA-Z0-9].[a-z]$/；
if(value== value==undefined value==null){
回调();
}否则{
如果(!注册测试（值)){
回调（新错误(请输入正确的邮箱地址));
}否则{
回调();
}
}
}
/* 合法uri*/
导出函数validateURL(textval) {
const urlregex=/^(https？ftp):\/\/([a-zA-Z0-9 .(:[a-zA-Z0-9 .%$-] )*@)*((25[0-5]2[0-4][0-9]1[0-9]{2}[1-9][0-9]?)(\.(25[0-5]2[0-4][0-9]1[0-9]{2}[1-9]?[0-9]){ 3 } ([a-zA-Z0-9-]).)*[a-zA-Z0-9-].(com edu gov int mil net org biz arpa info name pro aero coop museum [a-zA-Z]{ 2 })(:[0-9])*(\/($ [a-zA-Z0-9 .\\ %$#=~_-] ))*$/;
返回urlregex。测试(文本值)；
}
/*验证内容是否英文数字以及下划线*/
导出函数是密码(规则，值，回调){
const reg=/^[_a-za-z0-9]$/；
if(value== value==undefined value==null){
回调();
}否则{
如果(!注册测试（值)){
回调（新错误(密码仅由英文字母，数字以及下划线组成));
}否则{
回调();
}
}
}
/*自动检验数值的范围*/
导出函数checkMax20000(规则，值，回调){
if(value== value==undefined value==null){
回调();
} else if(！数字（值)){
回调（新错误(请输入[1,20000]之间的数字));
} else if (value 1 value 20000) {
回调（新错误(请输入[1,20000]之间的数字));
}否则{
回调();
}
}
//验证数字输入框最大数值，32767
导出函数checkMaxVal(规则，值，回调){
如果(值0 值32767) {
回调（新错误(请输入[0,32767]之间的数字));
}否则{
回调();
}
}
//验证是否1-99之间
导出函数isoneto 999(规则，值，回调){
如果(!值){
返回回调（新错误(输入不可以为空));
}
setTimeout(()={
如果(!数字（值)){
回调（新错误(请输入正整数));
}否则{
const re=/^[1-9][0-9]{0,1}$/；
const RS check=re测试(值)；
如果(!rsCheck) {
回调（新错误(请输入正整数，值为【1,99】));
}否则{
回调();
}
}
}, 0);
}
//验证是否整数
导出函数isInteger(规则，值，回调){
如果(!值){
返回回调（新错误(输入不可以为空));
}
setTimeout(()={
如果(!数字（值)){
回调（新错误(请输入正整数));
}否则{
const re=/^[0-9]*[1-9][0-9]*$/；
const RS check=re测试(值)；
如果(!rsCheck) {
回调（新错误(请输入正整数));
}否则{
回调();
}
}
}, 0);
}
//验证是否整数，非必填
导出函数isIntegerNotMust(规则，值，回调){
如果(!值){
回调();
}
setTimeout(()={
如果(!数字（值)){
回调（新错误(请输入正整数));
}否则{
const re=/^[0-9]*[1-9][0-9]*$/；
const RS check=re测试(值)；
如果(!rsCheck) {
回调（新错误(请输入正整数));
}否则{
回调();
}
}
}, 1000);
}
//验证是否是[0-1]的小数
导出函数是小数(规则，值，回调){
如果(!值){
返回回调（新错误(输入不可以为空));
}
setTimeout(()={
如果(!数字（值)){
回调（新错误(请输入[0,1]之间的数字));
}否则{
如果(值0 值1) {
回调（新错误(请输入[0,1]之间的数字));
}否则{
回调();
}
}
}, 100);
}
//验证是否是[1-10]的小数，即不可以等于0
导出函数isBtnOneToTen(规则，值，回调){
if (typeof value==undefined) {
返回回调（新错误(输入不可以为空));
}
setTimeout(()={
如果(!数字（值)){
回调（新错误(请输入正整数，值为[1,10]));
}否则{
如果(!（值==1 值==2 值==3 值==4 值==5 值==6 值==7 值==8 值==9 值== 10 ){
回调（新错误(请输入正整数，值为[1,10]));
}否则{
回调();
}
}
}, 100);
}
//验证是否是[1-100]的小数，即不可以等于0
导出函数isBtnOneToHundred(规则，值，回调){
如果(!值){
返回回调（新错误(输入不可以为空));
}
setTimeout(()={
如果(!数字（值)){
回调（新错误(请输入整数，值为[1,100]));
}否则{
如果(值1 值100) {
回调（新错误(请输入整数，值为[1,100]));
}否则{
回调();
}
}
}, 100);
}
//验证是否是[0-100]的小数
导出函数isBtnZeroToHundred(规则，值，回调){
如果(!值){
返回回调（新错误(输入不可以为空));
}
setTimeout(()={
如果(!数字（值)){
回调（新错误(请输入[1,100]之间的数字));
}否则{
如果(值0 值100) {
回调（新错误(请输入[1,100]之间的数字));
}否则{
回调();
}
}
}, 100);
}
//验证端口是否在[0,65535]之间
导出函数isPort(规则，值，回调){
如果(!值){
返回回调（新错误(输入不可以为空));
}
setTimeout(()={
if(value== type of(value)==undefined){
回调（新错误(请输入端口值));
}否则{
const re=/^([0-9][1-9]\d[1-9]\d{2}[1-9]\d{3}[1-5]\d{4}6[0-4]\d{3}65[0-4]\d{2}655[0-2]\d6553[0-5])$/；
const RS check=re测试(值)；
如果(!rsCheck) {
回调（新错误(请输入在[0-65535]之间的端口值));
}否则{
回调();
}
}
}, 100);
}
//验证端口是否在[0,65535]之间，非必填，是必须的表示是否必填
导出函数isCheckPort(规则，值，回调){
如果(!值){
回调();
}
setTimeout(()={
if(value== type of(value)==undefined){
//回调（新错误(请输入端口值));
}否则{
const re=/^([0-9][1-9]\d[1-9]\d{2}[1-9]\d{3}[1-5]\d{4}6[0-4]\d{3}65[0-4]\d{2}655[0-2]\d6553[0-5])$/；
const RS check=re测试(值)；
如果(!rsCheck) {
回调（新错误(请输入在[0-65535]之间的端口值));
}否则{
回调();
}
}
}, 100);
}
/* 小写字母*/
导出函数validateLowerCase(str) {
const reg=/^[a-z]$/；
返回注册测试(str)；
}
/*保留2为小数*/
导出函数validatetoFixedNew(str) {
返回字符串；
}
/* 验证键*/
//导出函数validateKey(str) {
//var reg=/^[a-z_\-:]$/；
//返回注册。测试(str)；
//}
/* 大写字母*/
导出函数验证大写（字符串){
const reg=/^[a-z]$/；
返回注册测试(str)；
}
/* 大小写字母*/
导出函数validatAlphabets(str) {
const reg=/^[a-za-z]$/；
返回注册测试(str)；
}
以上就是某视频剪辑软件使用规则对表单字段进行校验的步骤的详细内容，更多关于某视频剪辑软件用规则对表单字段进行校验的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。