jQuery表单验证以及将表单序列化为json对象小练习

jquery表单验证（非实时验证），同时，将表单序列化为json对象提交表单。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <link rel="stylesheet" href="../bootstrap-3.3.5/dist/css/bootstrap.min.css"/>

     <style>

         #form-validation {

             margin-top: 20px;

         }

         #form-validation .has-error {

             color: red;

             display: none;

         }

     </style>

 </head>

 <body>

 <div id="form-validation">

     <div class="container">

         <div class="row">

             <div class="col-md-6">

                 <form class="form-horizontal" action="" id="myForm" role="form">

                     <div class="form-group">

                         <label for="" class="col-md-4 control-label">用户名</label>

                         <div class="col-md-8">

                             <input type="text" class="form-control" name="userName" id="userName" placeholder="user name"/>

                             <p class="has-error userNameError">username can not be null!</p>

                             <p class="has-error userNameError2">username can only be english, number and '_'</p>

                         </div>

                     </div>

                     <div class="form-group">

                         <label for="" class="col-md-4 control-label">密码</label>

                         <div class="col-md-8">

                             <input type="password" class="form-control" name="pass" id="pass" placeholder="password"/>

                             <p class="has-error passwordError">password can not be null!</p>

                         </div>

                     </div>

                     <div class="form-group">

                         <label for="" class="col-md-4 control-label">重复密码</label>

                         <div class="col-md-8">

                             <input type="password" class="form-control" name="rePass" id="rePass" placeholder="password again"/>

                             <p class="has-error rePassError1">password can not be null!</p>

                             <p class="has-error rePassError2">repassword is not same as password!</p>

                         </div>

                     </div>

                     <div class="form-group">

                         <label for="" class="col-md-4 control-label">电话号码</label>

                         <div class="col-md-8">

                             <input type="text" class="form-control" name="phoneNum" id="phoneNum" placeholder="phone number"/>

                             <p class="has-error phoneNumError1">phone number can not be null!</p>

                             <p class="has-error phoneNumError2">phone number can only be digital!</p>

                         </div>

                     </div>

                     <div class="form-group">

                         <label  class="col-md-4 control-label">性别</label>

                         <div class="col-md-8">

                             <label for="" class="radio-inline"><input type="radio" name="sex" value="male"/>男</label>

                             <label for="" class="radio-inline"><input type="radio" name="sex" value="female"/>女</label>

                             <p class="has-error sexError">please select a sex!</p>

                         </div>

                     </div>

                     <div class="form-group">

                         <label  class="col-md-4 control-label">爱好</label>

                         <div class="col-md-8" id="hobby">

                             <label for="" class="checkbox-inline"><input type="checkbox" name="hobby" value="eat"/>吃</label>

                             <label for="" class="checkbox-inline"><input type="checkbox" name="hobby" value="drink"/>喝</label>

                             <label for="" class="checkbox-inline"><input type="checkbox" name="hobby" value="la"/>拉</label>

                             <label for="" class="checkbox-inline"><input type="checkbox" name="hobby" value="sa"/>撒</label>

                             <p class="has-error hobbyError">please at least select a hobby!</p>

                         </div>

                     </div>

                     <div class="form-group">

                         <label for="" class="col-md-4 control-label">居住城市</label>

                         <div class="col-md-8">

                             <select name="myCity" id="myCity" class="form-control">

                                 <option value="">请选择一个城市</option>

                                 <option value="chengdu">成都</option>

                                 <option value="shanghai">上海</option>

                                 <option value="beijing">北京</option><!--select的option要给出value值-->

                             </select>

                             <p class="has-error cityError">please select a city!</p>

                         </div>

                     </div>

                     <div class="form-group">

                         <div class="col-md-8 col-md-offset-4">

                             <input class="btn btn-primary" type="submit" value="submit"/>

                         </div>

                     </div>

                 </form>

             </div>

         </div>

     </div>

 </div>

 <script src="../js/jquery-1.11.2.js"></script>

 <script src="formSerializeJson.js"></script>

 <script type="text/javascript">

     // formSerializeJson.js

     (function($){

         $.fn.serializeJson = function(){

             var serializeObj = {};

             var array = this.serializeArray();

             $(array).each(function(){

                 if(serializeObj[this.name]){

                     if($.isArray(serializeObj[this.name])){

                         serializeObj[this.name].push(this.value);

                     }else{

                         serializeObj[this.name] = [serializeObj[this.name], this.value];

                     }

                 }else{

                     serializeObj[this.name] = this.value;

                 }

             });

             return serializeObj;

         };

     })(jQuery);

     $(function(){

         // 判断一个字符串是不是纯数字

         function judgeIsNum(str){

             var pattern = /^\d+$/g; // or : /^[0-9]*$/g

             //正则表达式 ^ 代表从开始位置起   $ 末尾   + 是连续多个  \d 是数字的意思  * 表示所有

             var result = str.match(pattern);

             if(result == null){

                 return false;

             }else{

                 return true;

             }

         }

         $("input[type=submit]").click(function(e){

             $('#myForm .has-error').hide();

             var submitFlag = true;

             if($('#userName').val() == ""){

                 $('.userNameError').show();

                 submitFlag = false;

             }else{

                 if($('#userName').val().match(/^\w+$/g) == null){

                     $('.userNameError2').show();

                     submitFlag = false;

                 }

             }

             if($('#pass').val() == ""){

                 $('.passwordError').show();

                 submitFlag = false;

             }

             if($('#rePass').val() == ""){

                 $('.rePassError1').show();

                 submitFlag = false;

             }else{

                 if($('#pass').val() != $('#rePass').val()){

                     $('.rePassError2').show();

                     submitFlag = false;

                 }

             }

             if($('#phoneNum').val() == ""){

                 $('.phoneNumError1').show();

                 submitFlag = false;

             }else{

                 if(!judgeIsNum($('#phoneNum').val())){

                     $('.phoneNumError2').show();

                     submitFlag = false;

                 }

             }

             console.log($('#myForm input:radio[name="sex"]:checked').val()); //不选的时候是 undefined， undefined == null

             if($('#myForm input:radio[name="sex"]:checked').val() == null){

                 $('.sexError').show();

                 submitFlag = false;

             }

             if($('#myForm input:checkbox:checked').length == 0){

                 $('.hobbyError').show();

                 submitFlag = false;

             }

             console.log($('#myCity').val());

             if($('#myCity').val() == ""){ //跟sex不一样，sex是undefined == null, 这里是“”

                 $('.cityError').show();

                 submitFlag = false;

             }

             e.preventDefault();

             if(submitFlag){

                 var data = $('#myForm').serializeJson();

                 console.log(data);

                 $.ajax({

                     url: "",

                     type: "post",

                     data: data,

                     success: function(data){

                         console.log("提交成功"+data);

                     },

                     error: function(){

                         console.log("error");

                     }

                 });

             }else{

                 alert('数据有错请更正！');

             }

         });

     });

 </script>

 </body>

 </html>

jQuery表单验证以及将表单序列化为json对象小练习的更多相关文章

023-将表单序列化为json对象
使用jQuery将表单序列化为json对象,其中serializeJson方法的名字任意,serializeArray()这个jQuery提供的方法.this指的就是谁调用了这个方法. $.fn.se ...
将表单序列化为JSON对象
将表单序列化为JSON对象的工具方法: $(function() { //工具方法,可以将指定的表单中的输入项目序列化为JSON数据 $.fn.serializeJson = function() { ...
Jquery 将表单序列化为Json对象
大家知道Jquery中有serialize方法,可以将表单序列化为一个“&”连接的字符串,但却没有提供序列化为Json的方法.不过,我们可以写一个插件实现. 我在网上看到有人用替换的方法,先用 ...
【jQuery】form表单元素序列化为json对象
序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head&g ...
jQuery form表单序列化为JSON对象！
/* 来源于博客园http://www.cnblogs.com/nixil/archive/2010/12/08/1900745.html */ function paramString2obj(se ...
js 表单序列化为json对象
$.fn.serializeJson = function () { var o = {}; var a = this.serializeArray(); $.each(a, function () ...
From 表单序列化为json对象（代码片段）
$.fn.serializeJson=function(){ var serializeObj={}; var array=this.serializeArray(); $(array).each(f ...
jquery扩展方法（表单数据格式化为json对象）
1.jquery扩展方法(表单数据格式化为json对象) <script type="text/javascript"> // 将表单数据序列化为一个json对象,例如 ...
form表单序列化为json格式数据
在web开发过程中,经常遇到将form序列化不能格式的字符串提交到后台,下面就介绍怎样将form表单序列化为json字符串. 首先,是扩展的jquery序列化插件,依赖jquery.经测试,这段代码可 ...

随机推荐

Camera类
Camera类使用 Camera 类可从连接到运行 Flash Player 的计算机的摄像头中捕获视频. 使用 Video 类可在本地监视视频. 使用 NetConnection 和 NetS ...
javaScript特效
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
PHP 实现ajax的接收
Ajax界面: 首先,理解本质,就是普通的一个提交在无刷新的情况下发出请求后得到响应,然后去针对你需要的情况来做行为. <!DOCTYPE html> <html> < ...
iOS在Cocoa Touch Static Library使用CocoaPods
1.在XCode中新建静态库工程:DDLogLib. 2.添加对外暴露接口的头文件DDLogLibHeader.h 3.命令行进入DDLogLib目录,运行pod init,并修改Podfile 4. ...
[转]Delphi 控件属性和事件
常用[属性] Action:该属性是与组件关联的行为,允许应用程序集中响应用户命令 Anchors:与组件连接的窗体的位置点 Align:确定组件的对齐方式 AutoSize:确定组件是否自动调整其大 ...
jQuery实现checkbox全选反选及删除等操作
1.list.html 说明:用checkbox数组Check[]存放每一行的ID值 <div id="con"> <table width="100% ...
【转载】ASP.NET页面运行机制以及请求处理流程
本文转至 ASP.NET页面运行机制以及请求处理流程 IIS处理页面的运行机制 IIS自身是不能处理像ASPX扩展名这样的页面,只能直接请求像HTML这样的静态文件,之所以能处理ASPX这样扩展名的页 ...
深入Java虚拟机读书笔记第二章平台无关性
Java的体系结构对平台无关的支持 Java平台 Java的体系结构通过几种途径支持Java程序的平台无关性,其中主要是通过Java平台自己.Java平台扮演一个运行时Java程序与其下的硬件和操作系 ...
php处理中文字符串
使用mbstring 先转换成UTF-8编码 mb_convert_encoding(Input::get('tags'),'UTF-8') mbstring用法参考http://php.net/ma ...
mysql hash索引优化
创建表 CREATE TABLE `t1` ( `id` int(11) NOT NULL AUTO_INCREMENT, `msg` varchar(20) NOT NULL DEFAULT ' ...

jQuery表单验证以及将表单序列化为json对象小练习

jQuery表单验证以及将表单序列化为json对象小练习的更多相关文章

随机推荐

热门专题