from表单数据的合法性验证是个很常见的需求，jQuery提供了一个插件：jquery validate 官网下载。
若想使用需先引用jquery.validate.js，并且要在jquery.js之后引用。
<script src="js/jquery.js"></script><script src="js/jquery.validate.js"></script>
- 1
- 2
把现在写的项目拿来演示一下，其使用了bootstrap框架。
<form class="form-horizontal" id="fillForm" action="javascript:void(0);"> <div class="form-group"> <label for="new_userName" class="col-md-2 control-label">昵称</label> <div class="col-md-8"> <div class="input-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-user"></span> </span> <input type="text" id="new_userName" name="new_userName" class="form-control" placeholder="输入新昵称(昵称确认后不可更改，4-10个字符)"> </div> </div> </div> <div class="form-group"> <label for="new_userPwd" class="col-md-2 control-label">密码</label> <div class="col-md-8"> <div class="input-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-lock"></span> </span> <input type="password" id="new_userPwd" name="new_userPwd" class="form-control" placeholder="输入密码(5-15个字符)"/> </div> </div> </div> <div class="form-group"> <label for="new_userPwd_twice" class="col-md-2 control-label">确认密码</label> <div class="col-md-8"> <div class="input-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-lock"></span> </span> <input type="password" id="new_userPwd_twice" name="new_userPwd_twice" class="form-control" placeholder="请再次输入密码"/> </div> </div> </div> <div class="form-group"> <label for="new_userEmail" class="control-label col-md-2">邮箱</label> <div class="col-md-8"> <div class="input-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-envelope"></span> </span> <input id="new_userEmail" name="new_userEmail" type="email" class="form-control" placeholder="输入个人邮箱"/> </div> </div> </div> <div class="form-group"> <label for="new_userPhone" class="control-label col-md-2">手机</label> <div class="col-md-8"> <div class="input-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-phone"></span> </span> <input type="text" id="new_userPhone" name="new_userPhone" class="form-control" placeholder="输入个人手机号"/> </div> </div> </div> <div class="form-group"> <label for="new_userBirth" class="control-label col-md-2">生日</label> <div class="col-md-8"> <div class="input-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> <input id="new_userBirth" name="new_userBirth" class="form-control" placeholder="选择您的生日(1960~2012)" readonly /> </div> </div> </div> <div class="form-group"> <label class="control-label col-md-2">性别</label> <div class="radio col-md-8"> <label class="col-md-2"> <input type="radio" name="new_userGender" id="man" value="man"> 男 </label> <label class="col-md-2"> <input type="radio" name="new_userGender" id="woman" value="woman"> 女 </label> <label class="col-md-2"> <input type="radio" name="new_userGender" id="secret" value="secret" checked> 保密 </label> </div> </div> <div class="form-group"> <label class="control-label col-md-2">院系</label> <div class="col-md-8"> <div id="col_and_maj" class="input-group"> <div class="col-md-4"> <select id="new_userCollege" name="new_userCollege" class="form-control col-md-3 prov"></select> </div> <div class="col-md-4"> <select id="new_userMajor" name="new_userMajor" class="form-control col-md-3 city"></select> </div> </div> </div> </div> <div class="form-group form-button"> <button type="reset" class="btn btn-default col-md-offset-8">重置</button> <button id="fillFormSubmit" type="submit" class="btn btn-primary">确认</button> </div> </form>
- 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
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
html文件跟平常一样，主要在js中进行验证：
$(function(){jQuery.validator.addMethod("regUserName", function (value, element) { return this.optional(element) || /^[0-9]*[a-zA-Z_\u4e00-\u9fa5]+[0-9]*$/.test(value); }, "注册昵称为4-10位数字、下划线、中文或英文字母，但不能全是数字"); jQuery.validator.addMethod("isMobile", function(value, element) { var length = value.length; var mobile = /^((\(\d{2,3}\))|(\d{3}\-))?1[3,8,5]{1}\d{9}$/; return this.optional(element) || (length == 11 && mobile.test(value)); }, "请正确填写您的手机号码"); //登录帐号合法性验证 jQuery.validator.addMethod("logAccountCheck", function (value, element) { var length = value.length; var mobile = /^((\(\d{2,3}\))|(\d{3}\-))?1[3,8,5]{1}\d{9}$/; return this.optional(element) || (length == 11 && mobile.test(value)) || /^[\u0391-\uFFE5\w]+$/.test(value); }, "昵称不符合登录规则");$("#fillForm").validate({ errorElement: 'span', errorClass: 'help-block', focusInvalid: false, rules: { new_userName: { required: true, regUserName: true, minlength: 4, maxlength: 10 }, new_userPwd: { required: true, rangelength: [5, 15] }, new_userPwd_twice: { required: true, equalTo: "#new_userPwd" }, new_userEmail: { required: true, email: true }, new_userPhone: { required: true, isMobile:true, digits: true, minlength: 11, maxlength: 11 }, new_userBirth: { required: true }, new_userCollege: { required: true }, new_userMajor: { required: true } }, messages: { new_userName: { required: '昵称不能为空', minlength: '昵称最少为4位', maxlength: '昵称最多为10位' }, new_userPwd: { required: '密码不能为空', rangelength: $.validator.format("密码长度必须在 {0} 到 {1} 之间") }, new_userPwd_twice: { required: '此项不能为空', equalTo: '两次输入的密码必须一致' }, new_userEmail: { required: '邮箱不能为空', email: '邮箱格式不正确(例如: [email protected])' }, new_userPhone: { required: '电话号不能为空', digits: '电话号必须是数字', minlength: '电话号为11位', maxlength: '电话号为11位' }, new_userBirth: { required: '生日不能为空' }, new_userCollege: { required: '学院不能为空' }, new_userMajor: { required: '专业不能为空' } }, highlight: function (element) { $(element).closest('.form-group').addClass('has-error'); }, success: function (label) { label.closest('.form-group').removeClass('has-error').addClass('has-success'); label.remove(); }, errorPlacement: function (error, element) { element.parent('div').after(error); }, submitHandler: function (form) { var result = { "new_userName": $("#new_userName").val(), "new_userPwd": $("#new_userPwd").val(), "new_userEmail": $("#new_userEmail").val(), "new_userPhone": $("#new_userPhone").val(), "new_userBirth": $("#new_userBirth").val(), "new_userGender": $("input[name='new_userGender']:checked").val(), "new_userCollege": $("#new_userCollege").val() + ',' + $("#new_userMajor").val() }; result.new_userIP = ip; var res = JSON.stringify(result); alert(res); return false; } })})
- 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
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
简单用法：
1.：rules里定义输入框规则，常见的有required, minlength, maxlength, email, 其中使用输入框的name属性来指定输入框。
2：messages里定义当输入内容不符合规则时显示的信息，如果自定义则显示默认的错误信息。
3：可以自定义规则，比如上面代码开头部分定义了自定义规则，可以根据自己的需求仿照代码即可，而且网上也提供了现成的自定义验证规则。
4：当输入框均符合规则时，可以点击提交，此时，会指定submitHandler函数，
更详细的使用教程可参考官网
再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow