最近做的项目,前台使用的bootstrap框架。对于前台框架来说,验证是必不可少的。对于常用的一些校验规则,如果有一个例子会更好的。虽然有提供validator的API,但是感觉不太好用。所以记录一下常用的几种校验方式。
准备工作
下载:相关的js和css文件
使用前提,必须是bootstrap框架。然后引入到项目中。
校验类型
客户端前台自校验
这种校验方式,validator已经封装的很好了。只是在写前台界面的时候要用以下这种结构:
<div class="form-group">
<label class="col-lg-3 control-label">Full name</label>
<div class="col-lg-4">
<input type="text" class="form-control" name="firstName"
placeholder="First name" required
data-bv-notempty-message="firstName不能为空(提示语)"
/>
</div>
</div>
上面的这种结构只需要写相应的校验方式,对data-bv……进行替换 或添加属性即可。
校验常用方式
非空校验
data-bv-notempty-message="XXX不能为空"
长度限制校验
data-bv-stringlength="true" data-bv-stringlength-min="6" data-bv-stringlength-max="30" data-bv-stringlength-message="这个字段长度不得小于6,不得超过30 "
邮箱校验
type="email" data-bv-emailaddress-message="The input is not a valid email address"
日期格式校验
data-bv-date="false" data-bv-date-format="YYYY/MM/DD" data-bv-date-message="The birthday is not valid"
前后台交互校验
对于前后太交互校验,最常用的是在ajax的回调函数中进行校验。以下是一个例子,可以当作模版使用。
$('#defaultForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
firstName: {
validators: {
notEmpty: {
message: 'The first name is required and cannot be empty'
}
}
},
lastName: {
validators: {
notEmpty: {
message: 'The last name is required and cannot be empty'
}
}
},
username: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and cannot be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
},
remote: {
url: 'remote.php',
message: 'The username is not available'
},
different: {
field: 'password',
message: 'The username and password cannot be the same as each other'
}
}
},
email: {
validators: {
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
},
identical: {
field: 'confirmPassword',
message: 'The password and its confirm are not the same'
},
different: {
field: 'username',
message: 'The password cannot be the same as username'
}
}
},
captcha: {
validators: {
callback: {
message: 'Wrong answer',
callback: function(value, validator) {
var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
}
}
}
}
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
这种校验方式写法容易理解,只需要在field 下面 写上需要校验的字段并指明校验方式即可。
对于有前后台交互的,只需要写上callback方法即可完成校验。
表单提交前校验
这种方式,是对上面一种写法的补充,例子如下:
$('#defaultForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
……
……
}
})
.on('success.form.bv', function(e) {
e.preventDefault();
var $form = $(e.target);
var bv = $form.data('bootstrapValidator');
$.post($form.attr('action'), $form.serialize(), function(result) {
console.log(result);
}, 'json');
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
对于表单提交前验证,这种方式,主要是对上述校验的第二种保护,只需要添加on方法即可。
总结
对于成熟的框架来说,都会有很方便的写法,这样才会发挥出框架的作用。我们要做的就是学会使用,快速的开发。