formVildation基本使用

最新推荐文章于 2025-02-09 11:47:51 发布

_wangshun

最新推荐文章于 2025-02-09 11:47:51 发布

阅读量283

点赞数

分类专栏：前端文章标签： formValidation 前端

本文链接：https://blog.youkuaiyun.com/qq_43524372/article/details/83415468

版权

前端专栏收录该内容

4 篇文章

订阅专栏

一、引入插件

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap</title>

<!-- 在线版的 -->
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<link href="../../css/formValidation.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<!-- bootstrap -->
<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<!-- formValidation -->
<script src="../../js/formValidation.min.js"></script>
<!-- 注意bootstrap.min.js文件有2个，这2个是不同的！ -->
<script src="../../js/formValidation/bootstrap.min.js"></script>

二、基本使用

<script type="text/javascript">
	$(() => {
	     var isStopSubmit = true;
	     $('#defaultForm').formValidation({
	         framework: 'bootstrap',//It can be: bootstrap, foundation, pure, semantic, uikit
	         excluded: [':disabled', ':hidden', ':not(:visible)'],//排除调不需要验证的元素
	         // trigger:"blur",//全局触发器，
	         locale: 'zh_CN',
	         icon: {//配置验证的图标样式——>✅、❌
	             valid: 'glyphicon glyphicon-ok',
	             invalid: 'glyphicon glyphicon-remove',
	             validating: 'glyphicon glyphicon-refresh'
	         },
	         /*icon: {
	             valid: 'fa fa-check',
	             invalid: 'fa fa-times',
	             validating: 'fa fa-refresh'
	         },*/
	         fields: {
	             username: {//默认取的是表单域的name，也可以用选择器，
	                 validators: {
	                     notEmpty: {
	                         message: '用户名不能为空'
	                     },
	                     /*stringLength: {
	                         min: 6,
	                         max: 30,
	                         message: '用户名必须在6-30个字符之间'
	                     },
	                     stringCase:{
	                       case:'lower',
	                         message: '用户名只能填小写'
	                     }*/
	                     /*remote:{
	                         method: 'POST',
	                         data:{
	                             username:'username'
	                         },//推荐使用这个方式，当然也可以在url后面拼接参数，如下：
	                         url: '/security/account/validateUserEmail.do?username='+$("input[name='username']").val(),
	                         message: '此用户名已经被注册！',
	                         validKey: 'flag',//该选项可以不给，如果不给，默认为'valid'
	                     }*/
	                 }
	             },
	             phone: {
	                 // verbose: false,//顺序验证
	                 validators: {
	                     notEmpty: {
	                         message: '手机号不能为空'
	                     },
	                     digits: {
	                         message: '只能输入数字'
	                     },
	                     /*integer: {
	                         message: '也可以输入负数'
	                     }*/
	                     /*greaterThan:{
	                         value : 10,
	                         message: '不能小于10',
	                     },
	                     lessThan: {
	                         value: 20,
	                         message: '不能大于20'
	                     }*/
	                     /*between:{
	                         min: -90.0,//可以输入浮点数
	                         max: 90.0,
	                         message: '纬度必须在 -90.0～90.0 之间',
	                     }*/
	                 }
	             },
	             email: {
	                 validators: {
	                     notEmpty: {
	                         message: '电子邮件不能为空'
	                     },
	                     emailAddress: {
	                         message: '请输入有效的电子邮件地址'
	                     }
	                 }
	             },
	             'languages[]': {
	                 validators: {
	                     choice: {
	                         min: 2,
	                         max: 4,
	                         message: '请选择你擅长的%s-%s门编程语言'
	                     }
	                 }
	             },
	             'ip': {
	                 validators: {
	                     notEmpty: {
	                         message: 'IP不能为空'
	                     },
	                     ip: {
	                         ipv4: true,
	                         ipv6: true,
	                         message: '请输入正确的ip地址',
	                     },
	                     /*regexp: {
	                         regexp: /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/,
	                         message: 'ip格式不正确'
	                     }*/
	                 }
	             },
	             password: {
	                 validators: {
	                     notEmpty: {
	                         message: '密码不能为空'
	                     },
	                     different: {
	                         field: 'username',
	                         message: '密码不能和用户名相同'
	                     }
	                 }
	             },
	             repeat_password: {
	                 validators: {
	                     notEmpty: {
	                         message: '确认密码不能为空'
	                     },
	                     identical: {
	                         field: 'password',
	                         message: '前后密码不一致'
	                     }
	                 }
	             },
	             sum: {
	                 validators: {
	                     callback: {
	                         message: '答案错误！',
	                         callback: function(value, validator, $field) {
	                             return value == 100;
	                         }
	                     }
	                 }
	             },
	             //验证隐藏域
	             hidden: {
	                 excluded:false,
	                 validators: {
	                     notEmpty: {
	                         message: '隐藏域不能为空！'
	                     }
	                 }
	             },
	             captcha: {
	                 // excluded:false,
	                 // trigger: 'blur',//单个触发器
	                 validators: {
	                     notEmpty: {
	                         message: '验证码不能为空！'
	                     },
	                     callback:{
	                         message: '验证码错误！',
	                         callback: function(value, validator, $field) {
	                             return value == '12345';
	                         }
	                     }
	                 },
	                 onSuccess: function(e, data) {
	                     $("#senSms").css("pointer-events","");
	                     $("#senSms").attr("disabled", false);
	                 },
	                 onError: function(e, data) {
	                     $("#senSms").css("pointer-events","none");
	                     $("#senSms").attr("disabled", true);
	                 },
	             },
	         },
	         onSuccess :function(e){
	            if(isStopSubmit) {
	                // 阻止默认提交
	                e.preventDefault();
	
	                var isComplete = false;
	                /*
	                  do something,比如说校验附件个数等等...
	                  isComplete = true;
	               */
	
	                if (isComplete) {
	                    isStopSubmit = false;
	                    $(e.currentTarget).submit();
	                }
	            }
	         },
	         onError: function(e) {
	             // do something ...
	         }
	     }).on("success.form.fv",function(e) {
	         if(isStopSubmit){
	             // 阻止默认提交
	             e.preventDefault();
	
	             var isComplete = false;
	             /*
	                 do something,比如说校验附件个数等等...
	                 isComplete = true;
	              */
	
	             if(isComplete){
	                 isStopSubmit = false;
	                 $(e.currentTarget).submit();
	             }
	         }
	     });
	 });
</script>

三、动态校验

1.动态添加验证

$form.formValidation('addField',"验证元素的name值",{
	validators:{
		notEmpty: {
			message:"用户名为必选项"
		}
	}
});

2.动态移除验证

$form.formValidation('removeField',"验证元素的name值");

3.手动触发验证

$form. formValidation('revalidateField',"验证元素的name值");

4.重置验证

$form.formValidation('resetField',"验证元素的name值");