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.经测试,这段代码可 ...
随机推荐
- 排名最重要的三个优化阶段分析 --------------------->>转至(卧牛SEO/武汉SEO http://blog.sina.com.cn/zhengkangseo )
网站排名,不是一两天能够决定的.要想取得好的排名,得分时间分阶段地做排名,网站优化分前期,中期,后期,怎么来区别不同的阶段该用怎样的优化手段.今晚SEO研究中心创始人Moon老师分享:排名最重要的三个 ...
- "SOAP WebService " 和 "RESTful WebService" 的定义分别是什么？？？
一个个来,要知道区别,首先得知道各自的意义及用途web service采用Xml传输结构化的数据,轻量级跨平台而soap则是一种基于http的应用层通讯协议,同样采用xml编码,只不过soap又更进了 ...
- 为什么z-index不起作用
感觉很简单的东西 在用的时候 可能会遇到这样活那样的问题 这就是要注意细节:参考地址:http://www.ourjour.com/136/ 设置z-index 不起作用,可能是这三个原因: 1.父标 ...
- NSString&NSMutableString常用操作梳理（转）
作者:弦苦 授权本站转载. 上一篇梳理了NSArray&NSMutableArray常用操作,这次来梳理一下Objective-C中每天都要用到的字符串处理类——NSString. Objec ...
- C# static 干货全解析
讲解顺序 背景 静态字段 静态函数 静态方法 疑问解答 背景 static来源 在编写类的时候,有时候需要类里面的某个成员具有唯一性,也就是,对所有的对象都保持只有一个的状态.比如创建个人信息,我们都 ...
- JavaScript验证身份证号
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncodin ...
- 利用C++ RAII技术自动回收堆内存
在C++的编程过程中,我们经常需要申请一块动态内存,然后当用完以后将其释放.通常而言,我们的代码是这样的: 1: void func() 2: { 3: //allocate a dynamic me ...
- sql批量插入数据之存储过程
-- ============================================= -- Author: jf_ou -- Create date: 2016/03/22 -- Desc ...
- 2.2.5 NIO.2 Path 和 Java 已有的 File 类
NIO与IO交互 toPath() File -- Path toFile() Path -- File Demo: import java.io.File; import java.nio.file ...
- Python自动化运维之18、Python操作 MySQL、pymysql、SQLAchemy
一.MySQL 1.概述 什么是数据库 ? 答:数据的仓库,和Excel表中的行和列是差不多的,只是有各种约束和不同数据类型的表格 什么是 MySQL.Oracle.SQLite.Access.MS ...