jQuery表单验证及清除验证结果

背景描述

对于新增操作,我们往往会在一个弹出框中进行处理。这里涉及到几个验证需求:

1) 输入字段的非空、金钱数字等验证(我这里在对表单的金钱数字进行验证时,规则要求如下:最多5位整数和2位小数)

2) 关闭弹出框后再次进入,希望不保留上次的输入内容及验证结果

解决方案

本方案主要针对前端验证,采用jQuery Validate插件。

1. 首先引入相关JS

<script src="validate/jquery.validate.min.js"></script>
<script src="validate/additional-methods.min.js"></script>

2. 设置输入框的验证规则

<input type="number" name="fee" pattern="\d{1,5}([\.]\d{2})?" title="金额格式不正确(#####.##)" class="form-control"/>

input type=”number”可以限制用户只能输入数值类型,包括小数点。

pattern是正则表达式验证,表示1~5位整数,可选的1~2位小数。

3. 初始化表单验证

var addRuleFormValidate;
function initFormValidation(id){
  addRuleFormValidate = $("#"+id).validate({
    onBlur: true,
    onChange: true,
    success: function(label) {
      label.closest('.form-group').removeClass('has-error'); 
    }
 });
}

$(function () {
  initFormValidation("addRuleForm");
});

onBlur: true表示输入框失去焦点时立刻验证。

success: function…表示在验证通过时执行的处理。这里覆盖原有方法的目的是移除默认验证通过时的绿色样式,移除验证失败时的错误样式。

4. 关闭表单窗口后再次打开清空验证错误信息

function resetFormValidation(){
  addRuleFormValidate.resetForm();
  var errorInputs = $(".has-error");
  errorInputs.each(function(){
    $(this).removeClass('has-error');
  }); 
}

resetFormValidation()方法用于移除表单验证未通过的错误提示。注意resetForm()方法会清除表单原有的数据。所以在调用该方法之后,再对表单进行初值设置。each()方法则是将所以验证未通过的样式移除。

参考链接

http://www.runoob.com/jquery/jquery-plugin-validate.html

https://github.com/DiegoLopesLima/Validate#readme

分享到:

发表评论

昵称

沙发空缺中,还不快抢~