html表单验证素材,BootstrapValidator验证表单插件

本文演示了bootstrap表单验证，压缩包里有多种演示方法。js如何验证表单,validate验证用户表单输入插件，判断格式是否正确

下载资源

下载积分：

40

积分

表单HTML代码

用户名

邮箱

生日

(YYYY/MM/DD)

提交

自动验证

重置表单

引入bootstrap和bootstrapValidator表单验证插件

表单验证 $('#defaultForm').bootstrapValidator({

message: 'This value is not valid',

feedbackIcons: {

valid: 'glyphicon glyphicon-ok',

invalid: 'glyphicon glyphicon-remove',

validating: 'glyphicon glyphicon-refresh'

},

fields: {

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'

}

}

},

}

});

表单提交 $('#validateBtn').click(function() {

$('#defaultForm').bootstrapValidator('validate');

});

表单重置 $('#resetBtn').click(function() {

$('#defaultForm').data('bootstrapValidator').resetForm(true);

});

BootstrapValidator两种提交方法： var bootstrapValidator = $(form).data('bootstrapValidator');

bootstrapValidator.methodName(parameters)

或者 $(form).bootstrapValidator(methodName, parameters);

第一种方法主要是返回 BootstrapValidator同时第二个实例,总是返回jQuery对象表示形式。

所以方法拓展如下: // 第一种方法

$(form)

.data('bootstrapValidator')

.updateStatus('birthday', 'NOT_VALIDATED')

.validateField('birthday');

// 第二种方法

$(form)

.bootstrapValidator('updateStatus', 'birthday', 'NOT_VALIDATED')

.bootstrapValidator('validateField', 'birthday');

bootstrapValidator中文API 参数

描述

默认值

defaultSubmit

默认提交表单

-

disableSubmitButtons

禁用或启用提交按钮

-

enableFieldValidators

启用/禁用所有给定的字段验证器 (如果 true,使字段验证器。如果 false禁用字段验证器)

-

getFieldElements

检索字段元素的名字

-

isValid

返回 true如果所有的表单字段是有效的。否则,返回 false.

-

resetForm

重置表单

-

updateElementStatus

更新验证给定元素的结果

-

updateStatus(field, status, validatorName)

更新为给定字段验证器的结果，status可以 NOT_VALIDATED, VALIDATING, INVALID或 VALID，validatorName字符串验证器的名称。如果 null所有验证器,更新方法有效性的结果

-