jQuery表单验证以及将表单序列化为json对象小练习
jquery表单验证（非实时验证），同时，将表单序列化为json对象提交表单。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="../bootstrap-3.3.5/dist/css/bootstrap.min.css"/> 7 <style> 8 #form-validation { 9 margin-top: 20px; 10 } 11 12 #form-validation .has-error { 13 color: red; 14 display: none; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="form-validation"> 20 <div class="container"> 21 <div class="row"> 22 <div class="col-md-6"> 23 <form class="form-horizontal" action="" id="myForm" role="form"> 24 <div class="form-group"> 25 <label for="" class="col-md-4 control-label">用户名</label> 26 <div class="col-md-8"> 27 <input type="text" class="form-control" name="userName" id="userName" placeholder="user name"/> 28 <p class="has-error userNameError">username can not be null!</p> 29 <p class="has-error userNameError2">username can only be english, number and '_'</p> 30 </div> 31 </div> 32 <div class="form-group"> 33 <label for="" class="col-md-4 control-label">密码</label> 34 <div class="col-md-8"> 35 <input type="password" class="form-control" name="pass" id="pass" placeholder="password"/> 36 <p class="has-error passwordError">password can not be null!</p> 37 </div> 38 </div> 39 <div class="form-group"> 40 <label for="" class="col-md-4 control-label">重复密码</label> 41 <div class="col-md-8"> 42 <input type="password" class="form-control" name="rePass" id="rePass" placeholder="password again"/> 43 <p class="has-error rePassError1">password can not be null!</p> 44 <p class="has-error rePassError2">repassword is not same as password!</p> 45 </div> 46 </div> 47 <div class="form-group"> 48 <label for="" class="col-md-4 control-label">电话号码</label> 49 <div class="col-md-8"> 50 <input type="text" class="form-control" name="phoneNum" id="phoneNum" placeholder="phone number"/> 51 <p class="has-error phoneNumError1">phone number can not be null!</p> 52 <p class="has-error phoneNumError2">phone number can only be digital!</p> 53 </div> 54 </div> 55 <div class="form-group"> 56 <label class="col-md-4 control-label">性别</label> 57 <div class="col-md-8"> 58 <label for="" class="radio-inline"><input type="radio" name="sex" value="male"/>男</label> 59 <label for="" class="radio-inline"><input type="radio" name="sex" value="female"/>女</label> 60 <p class="has-error sexError">please select a sex!</p> 61 </div> 62 </div> 63 <div class="form-group"> 64 <label class="col-md-4 control-label">爱好</label> 65 <div class="col-md-8" id="hobby"> 66 <label for="" class="checkbox-inline"><input type="checkbox" name="hobby" value="eat"/>吃</label> 67 <label for="" class="checkbox-inline"><input type="checkbox" name="hobby" value="drink"/>喝</label> 68 <label for="" class="checkbox-inline"><input type="checkbox" name="hobby" value="la"/>拉</label> 69 <label for="" class="checkbox-inline"><input type="checkbox" name="hobby" value="sa"/>撒</label> 70 <p class="has-error hobbyError">please at least select a hobby!</p> 71 </div> 72 </div> 73 <div class="form-group"> 74 <label for="" class="col-md-4 control-label">居住城市</label> 75 <div class="col-md-8"> 76 <select name="myCity" id="myCity" class="form-control"> 77 <option value="">请选择一个城市</option> 78 <option value="chengdu">成都</option> 79 <option value="shanghai">上海</option> 80 <option value="beijing">北京</option><!--select的option要给出value值--> 81 </select> 82 <p class="has-error cityError">please select a city!</p> 83 </div> 84 </div> 85 <div class="form-group"> 86 <div class="col-md-8 col-md-offset-4"> 87 <input class="btn btn-primary" type="submit" value="submit"/> 88 </div> 89 </div> 90 </form> 91 </div> 92 </div> 93 </div> 94 </div> 95 <script src="../js/jquery-1.11.2.js"></script> 96 <script src="formSerializeJson.js"></script> 97 <script type="text/javascript"> 98 // formSerializeJson.js 99 (function($){ 100 $.fn.serializeJson = function(){ 101 var serializeObj = {}; 102 var array = this.serializeArray(); 103 $(array).each(function(){ 104 if(serializeObj[this.name]){ 105 if($.isArray(serializeObj[this.name])){ 106 serializeObj[this.name].push(this.value); 107 }else{ 108 serializeObj[this.name] = [serializeObj[this.name], this.value]; 109 } 110 }else{ 111 serializeObj[this.name] = this.value; 112 } 113 }); 114 return serializeObj; 115 }; 116 })(jQuery); 117 118 $(function(){ 119 // 判断一个字符串是不是纯数字 120 function judgeIsNum(str){ 121 var pattern = /^\d+$/g; // or : /^[0-9]*$/g 122 //正则表达式 ^ 代表从开始位置起 $ 末尾 + 是连续多个 \d 是数字的意思 * 表示所有 123 var result = str.match(pattern); 124 if(result == null){ 125 return false; 126 }else{ 127 return true; 128 } 129 } 130 $("input[type=submit]").click(function(e){ 131 $('#myForm .has-error').hide(); 132 var submitFlag = true; 133 if($('#userName').val() == ""){ 134 $('.userNameError').show(); 135 submitFlag = false; 136 }else{ 137 if($('#userName').val().match(/^\w+$/g) == null){ 138 $('.userNameError2').show(); 139 submitFlag = false; 140 } 141 } 142 if($('#pass').val() == ""){ 143 $('.passwordError').show(); 144 submitFlag = false; 145 } 146 if($('#rePass').val() == ""){ 147 $('.rePassError1').show(); 148 submitFlag = false; 149 }else{ 150 if($('#pass').val() != $('#rePass').val()){ 151 $('.rePassError2').show(); 152 submitFlag = false; 153 } 154 } 155 if($('#phoneNum').val() == ""){ 156 $('.phoneNumError1').show(); 157 submitFlag = false; 158 }else{ 159 if(!judgeIsNum($('#phoneNum').val())){ 160 $('.phoneNumError2').show(); 161 submitFlag = false; 162 } 163 } 164 console.log($('#myForm input:radio[name="sex"]:checked').val()); //不选的时候是 undefined， undefined == null 165 if($('#myForm input:radio[name="sex"]:checked').val() == null){ 166 $('.sexError').show(); 167 submitFlag = false; 168 } 169 170 if($('#myForm input:checkbox:checked').length == 0){ 171 $('.hobbyError').show(); 172 submitFlag = false; 173 } 174 console.log($('#myCity').val()); 175 176 if($('#myCity').val() == ""){ //跟sex不一样，sex是undefined == null, 这里是“” 177 $('.cityError').show(); 178 submitFlag = false; 179 } 180 e.preventDefault(); 181 if(submitFlag){ 182 var data = $('#myForm').serializeJson(); 183 console.log(data); 184 $.ajax({ 185 url: "", 186 type: "post", 187 data: data, 188 success: function(data){ 189 console.log("提交成功"+data); 190 }, 191 error: function(){ 192 console.log("error"); 193 } 194 }); 195 196 }else{ 197 alert('数据有错请更正！'); 198 } 199 200 201 202 203 }); 204 205 }); 206 </script> 207 </body> 208 </html>
