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.经测试,这段代码可 ...
随机推荐
- HUD3336
/* 巧妙地使用fail数组 根据fail数组的定义 fail[i] 有 长度为i的子串最长公共前后缀为fail[i] 比如样例 fail 0 0 1 2 那么我们维护一个ans[i]表示到i位置的时 ...
- codevs3008加工生产调度（Johnson算法）
#include<iostream> #include<cstdio> #include<cstring> #include<algorithm> us ...
- border属性妙用
以前只知道border属性是盒模型中的边框属性,一直不清楚每个边的border是矩形拼接有重合呢,还是梯形无缝拼接的. border梯形 为了观察边框究竟是哪一种拼接方式,为边框设置不同的颜色背景,代 ...
- 从Select语句看Oracle查询原理（了解Oracle的查询机制）
第一步:客户端把语句发给服务器端执行 当我们在客户端执行select语句时,客户端会把这条SQL语句发送给服务器端,让服务器端的进程来处理这语句.也就是说,Oracle客户端是不会做任何的操作,他的主 ...
- UIBarButtonItem-添加自定义Left或者Right按钮 <总结>
为UINavigationController添加UINavigationItem 1.添加返回导航按钮backBarButtonItem 1.用系统自带的返回按钮 UIBarButtonIt ...
- 使用less函数实现不同背景的CSS样式
今天在公司遇到一个比较特殊的需求,需要完成这样的布局,如下图: 每一个块的背景需要不同,而其他都是相同的,这时候就应该把背景提出来单独写成一个CSS样式类. 那么问题来了,有四个不同的背景需要写4个基 ...
- Java中final关键字的用法
- 重新开始学习javase_隐藏实施过程
一.隐藏实施过程 对于隐藏实施过程,thinking in java中讲了很好,无非就是一个好的程序尽量做到,对外公开的程序,即使内部程序发生变动,也不会影响这些公开的服务的使用 类的导入java中的 ...
- 你好，C++（36）人参再好，也不能当饭吃！6.3 类是如何面向对象的
6.3 类是如何面向对象的 类作为C++与面向对象思想结合的产物,作为面向对象思想在C++中的载体,它的身上流淌着面向对象的血液.从类成员的构成到类之间的继承关系再到虚函数,到处都体现着面向对象封装 ...
- 服务器之间socket传输单链接和多连接测试结果
今天做了一下测试,目的是看看局域网内服务器a,通过一个连接往服务器b传输数据,和通过多个连接传输的不同. 结果发现和多少个连接没关系,一个进程一个连接就能跑满网卡,只要write的时候够快,read的 ...