通用表单验证formvalidator 后端验证

@航空母舰

已于 2023-08-22 14:29:27 修改

阅读量1.9k

点赞数

分类专栏： javascript 文章标签： javascript ajax 前端

于 2020-07-03 13:32:32 首次发布

本文链接：https://blog.csdn.net/hudeyong926/article/details/107103969

版权

javascript 专栏收录该内容

70 篇文章 1 订阅

订阅专栏

在使用formvalidator4.1.3 插件时发现正常情况调用时没有问题的,但是我们的项目中需要把css 、js 之类的静态资源用单独的域名加载。那么问题就来了在该插件中有一段这样的程序

//读取主题对应的脚本
var scriptSrcArray = fv_scriptSrc.split('/');
var jsName = scriptSrcArray[scriptSrcArray.length - 1];
var themedir = fv_scriptSrc.replace(jsName, '');
$.ajax({async: false, type: "GET", url: themedir + "themes/" + settings.theme + "/js/theme.js", dataType: "script",
    error: function () {
        alert('当前皮肤加载出错，请确认皮肤【' + settings.theme + '】是否存在')
    }
});

这段代码会去请求加载皮肤的一个 theme.js 但是和当前访问的域名不一致 ,也就是跨域没法加载，删除这段代码，手动在页面上加入theme.js即可

<script src="http://domain.com/themes/Default/js/theme.js" type="text/javascript" charset="UTF-8"></script>

高版本Jquery支持,修改55行

if (typeof($.browser) == "undefined") { #增加Jquery高版本支持
    $.browser = $.support;
}
if ($.browser.msie) {

SingleTip bug修改123行

if(initConfig.mode == "SingleTip")
{
	//显示和保存提示信息
	$("#fv_content").html(showmsg);
	elem.Tooltip = showmsg;
	var tip = $("#"+elem.settings[0].tipID); //fix bug
	if(showclass!="onError"){tip.hide()}
}

formValidator4.1.3 ajax中文乱码bug

var value = escape(decodeURIComponent(data.substr(li_pos+1)));

改成

var value = decodeURIComponent(data.substr(li_pos+1));

formValidator4.1.3 formvalidatorregex.js bug：

money : "/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/",
mobile:"^(\+)?(86)?(0[1-2][1-9]{1,2})?(0)?1[3-9]{1}[0-9\*]{9}$", //手机号规则: [86+区号+0] + 手机号,支持脱敏*
ps_username:"^[\\u4E00-\\u9FA5\\uF900-\\uFA2D_\\w]+$" //中文、字母、数字 _

弹出提示内容(AlertTip)：没有提示层，直接通过alert提示,可以用于兼容PC和wap端

不同的版本跟大小写字母有关,API用法也变了

initConfig增加theme 属性，表示皮肤名，theme 的值可取目录theme 下的文件夹名,默认是default，自定义验证的html样式。打开皮肤目录下的对应style.css文件，把重名的样式名改掉，再把theme.js文件里对应的名字改过来。theme.js

$class$表示对应的样式名。可以省略，可以表示分别是：onShow、onFocus、onError、onCorrect。
$data$表示显示的内容。可以省略。

submitOnce 校验通过后，是否灰掉所有的提交按钮

debug: false,//如果你要调试代码，你可以设置debug为true，校验成功了，也不会提交表单。

defaultPassed 默认校验通过，显示onCorrect状态,配合empty:true

defaultValue为input、select、textarea控件设置默认值

mode:'AutoTip',自动创建<div id="XXTip"></div>

wideWord 是否把一个全角字符当做2个长度

刚打开页面的时候我不想显示onshow的状态，如何实现这种功能？[top]

onCorrect:"&nbsp;",  //不要文字，只要提示图片

errorFocus(默认: true)整个校验组校验失败的时候，第一个出错的控件是否获得焦点,empty:true

.ajaxValidator({
    type : "get",
    url : "",
    data :"m=member&c=index&a=public_checknickname_ajax",
    datatype : "html",
    async:'false',
    success : function(data){
          return true;
    },
    buttons: $("#dosubmit"),
    onError : "昵称已经存在",
    onWait : "请稍候..."
}).defaultPassed();
$("#ms").formValidator({onShowFixText:"",onShowText:"这家伙很懒，什么都没有留下。",ajax:true,defaultValue:"这家伙很懒，什么都没有留下。"}).inputValidator({min:20,onError:"你输入的描述长度不正确,请确认"});

设置ajax:true,其他控件的值会作为参数传到ajaxValidator里面

http://www.test.com/public_checknickname_ajax?clientid=us&rand=1516460149809&us=maodong22&ms=1212&_=1516460146200

如何实现用<a href="javascript:dosubmit()">提交</a>来启用验证

function dosubmit(){
    $('#form').submit();
}
$.formValidator.initConfig({formID: "adminForm", mode: "AutoTip", submitOnce: true, ajaxPrompt : '有数据正在异步验证，请稍后提交'});

如果某个控件triggerEvent是blur触发验证，点击获取验证码怎么触发

$("#nl").formValidator({
    autoModify:true,
    onShow:"请输入的年龄（1-99岁之间）",
    onFocus:"只能输入1-99之间的数字哦",
    onCorrect:"恭喜你,你输对了"
}).inputValidator({
    min:1,
    max:99,
    type:"value",
    onErrorMin:"你输入的值必须大于等于1",
    onError:"年龄必须在1-99之间，请确认"
});
$("#mobile").formValidator({
	onShow:"请输入手机号码",
	onFocus:"手机的长度必须是11位",
	onCorrect:"手机合法"
}).inputValidator({
	min:11,
	max:11,
	onError:"手机号码必须为11位,请确认"
}).regexValidator({
    regExp:"mobile",//regExp: ["tel", "mobile"],        
    dataType:"enum",
    onError:"手机/座机的格式不正确"
});
$("#password").formValidator({
    onShow: "",
    onFocus: "请输入密码",
    onCorrect: "&nbsp;",
    empty:true
}).inputValidator({
    min: 4,
    onError: "密码长度不能小于4位"
});
$("#repeatpwd").formValidator({
    onShow: "",
    onFocus: "请输入确认密码",
    onCorrect: "&nbsp;"
}).compareValidator({
    desID: "password",
    operateor: "=",
    onError: "两次输入密码不一致"
});
$("#verifyBtn").click({ //点获取验证码验证手机
    $("#mobile").blur();
});

得到某个控件验证结果，验证通过是true，不过是false，如手机号码验证正确是才发送短信验证码

var result = $.formValidator.isOneValid('mobile'); //id
if(result){
    sendSmsCode();
}

在同一个页面你可以拥有很多个校验组，你只需在提交的按钮那里调用，ajax提交

return jQuery.formValidator.pageIsValid('校验组号') ;

来完成多个组的校验，互不干扰。

在A条件下，某个控件是不检验的，在B条件下，这个控件又是检验的，如何实现

if(A条件){
    $("#sfzh").attr("disabled",true).unFormValidator(true); //解除校验
}else{
    $("#sfzh").attr("disabled",false).unFormValidator(false);//恢复校验
}

两个放一行怎么处理，设置同一个tipID

$("#purchase_date").formValidator({
    triggerevent:"change",
    onShow:"请输入采购时间!",
    onFocus:"请输入采购时间",
    onCorrect:"输入正确"
}).functionValidator({fun:isDateTime, onerror:'日期格式错误'});

二次前端验证拦截

$.formValidator.initConfig({
    formID: "registerForm",
    onSuccess: function(){
        var result;
        var mobile = $("#mobile").val();
        var code = $("#sms").val();
        $.ajax({
            type: 'POST',
            url: '/verify/check',
            async:false,
            data: {mobile: mobile, verify: code, type: 2},
            success: function (data) {
                if(data==1){
                    result= true; //pass
                }else{
                    $.formValidator.setFailState("Admin_unameTip", '短信验证码错误');
                    result = false;//禁止提交            
                }
            }
        });
        return result;
    }
});

手动显示控件的错误样式

$.formValidator.setFailState("categoryTip", '请选择店铺分类');

大写字母验证

regExp:"letter_u",dataType:"enum",param:"g",onError:"订单标示为大写字母"

车牌验证

function anaCarNumber($carNumberString) {
    $license = strtoupper(str_replace(array('·','-',' '), '', $carNumberString));
    
    //京AL4T30
    $reg0 = "/^([京津冀晋蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼川贵云渝藏陕甘青宁新]{1})([A-Z]{1}[0-9a-zA-Z]{5})$/u";
    //京BF12345
    $reg1 = "/^([京津冀晋蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼川贵云渝藏陕甘青宁新]{1})([A-Z]{1}[0-9a-zA-Z]{6})$/u";
    //使014578
    $reg2 = "/^([使]{1})([0-9a-zA-Z]{6})$/u";
    //沪A0023领
    $reg2_2 = "/^([京津冀晋蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼川贵云渝藏陕甘青宁新]{1})([0-9a-zA-Z]{5})([挂警学领]{1})$/u";
    //粤ZF023港 粤ZF023澳
    $reg3 = "/^([粤]{1})([0-9a-zA-Z]{5})([港澳]{1})$/u";
    //无车牌
    $reg99 = "/^无车牌$/u";

    if (preg_match_all($reg99, $license, $match)) {
        $bk = ['it_is' => true, 'type' => 99, 'province' => '', 'middle_str' => $match[0][0], 'end_str' => ''];
    } elseif (preg_match_all($reg3, $license, $match)) {
        $bk = ['it_is' => true, 'type' => 3, 'province' => $match[1][0], 'middle_str' => $match[2][0], 'end_str' => $match[3][0]];
    } elseif (preg_match_all($reg2_2, $license, $match)) {
        $bk = ['it_is' => true, 'type' => 2, 'province' => $match[1][0], 'middle_str' => $match[2][0], 'end_str' => $match[3][0]];
    } elseif (preg_match_all($reg2, $license, $match)) {
        $bk = ['it_is' => true, 'type' => 2, 'province' => $match[1][0], 'middle_str' => $match[2][0], 'end_str' => ''];
    } elseif (preg_match_all($reg1, $license, $match)) {
        $bk = ['it_is' => true, 'type' => 1, 'province' => $match[1][0], 'middle_str' => $match[2][0], 'end_str' => ''];
    } elseif (preg_match_all($reg0, $license, $match)) {
        $bk = ['it_is' => true, 'type' => 0, 'province' => $match[1][0], 'middle_str' => $match[2][0], 'end_str' => ''];
    } else {
        $bk = ['it_is' => false, 'type' => -1, 'province' => '', 'middle_str' => '', 'end_str' => ''];
    }
    //return $bk;
    if ($bk['it_is'] == true) {
        return array(
            'type' => $bk['type'],
            'province' => $bk['province'],
            'number' => strtoupper($bk['middle_str']) . $bk['end_str'],
        );
    } else {
        return array(
            'type' => -1,
            'province' => '',
            'number' => $carNumberString,
        );
    }
}

js车牌验证

/**
 * 判断车牌号
 * 0 => ['name'=> '普通蓝牌', 'value'=>0, 'color'=>'蓝底白字', 'example'=>'京AL4T30'],
 1 => ['name'=> '新能源绿牌', 'value'=>1, 'color'=>'绿底黑字', 'example'=>'京BF12345'],
 2 => ['name'=> '使领馆黑牌', 'value'=>2, 'color'=>'黑底白字', 'example'=>'使014578, 沪A0023领'],
 3 => ['name'=> '港澳入境黑牌', 'value'=>3, 'color'=>'黑底白字', 'example'=>'粤ZF023港, 粤ZF023澳'],
 99 => ['name'=> '无车牌', 'value'=>99, 'color'=>'', 'example'=>'无车牌'],
  所有中文   [\u4e00-\u9fa5]
  使:\u4f7f
  领：\u9886
  粤: \u7ca4
  澳: \u6fb3
  港 ：\u6e2f
 无车牌:\u65e0\u8f66\u724c
 * */
function checkFullCarNumber(fullstr) {
    //京AL4T30
    var reg0 = /^[\u4e00-\u9fa5][A-Z][A-Z0-9]{5}$/i;
    //京BF12345
    var reg1 = /^[\u4e00-\u9fa5][A-Z][A-Z0-9]{6}$/i;
    //使014578
    var reg2 = /^[\u4f7f][A-Z0-9]{6}$/i;
    //沪A0023领
    var reg2_2 = /^[\u4e00-\u9fa5][A-Z0-9]{5}[\u9886]$/i;
    //粤ZF023港 粤ZF023澳
    var reg3 = /^[\u7ca4][A-Z0-9]{5}[\u6fb3\u6e2f]$/i;
    //无车牌
    var reg99 = /^\u65e0\u8f66\u724c$/i;

    var fist = fullstr.substr(0, 1);
    var vstr = fullstr.substr(1, fullstr.length - 1);
    if (reg99.test(fullstr)) {
        return { it_is: true, type: 99, province: '', nopv: ''  };
    } else if (reg3.test(fullstr)) {
        return { it_is: true, type: 3, province: fist, nopv: vstr  };
    } else if (reg2_2.test(fullstr)) {
        return { it_is: true, type: 2, province: fist, nopv: vstr };
    } else if (reg2.test(fullstr)) {
        return { it_is: true, type: 2, province: fist, nopv: vstr };
    } else if (reg1.test(fullstr)) {
        return { it_is: true, type: 1, province: fist, nopv: vstr };
    } else if (reg0.test(fullstr)) {
        return { it_is: true, type: 0, province: fist, nopv: vstr };
    } else {
        return { it_is: false, type: -1, province: '', nopv: ''  };
    }
}https://github.com/overtrue/validator.js
https://github.com/overtrue/validation

@航空母舰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通用表单验证formvalidator 后端验证

在使用formvalidator4.1.3 插件时发现正常情况调用时没有问题的,但是我们的项目中需要把css 、js 之类的静态资源用单独的域名加载。那么问题就来了在该插件中有一段这样的程序//读取主题对应的脚本var scriptSrcArray = fv_scriptSrc.split('/');var jsName = scriptSrcArray[scriptSrcArray.length - 1];var themedir = fv_scriptSrc.replace(jsN..
复制链接

扫一扫