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.经测试,这段代码可 ...
随机推荐
- ASP.NET面试
1.net中读写数据库需要用到那些类?他们的作用都是什么?答:DataSet:数据存储器.DataCommand:执行语句命令.DataAdapter:数据的集合,用语填充.2.介绍一下什么是Code ...
- HttpClient 发送图片
var httpClient = new HttpClient(); using (FileStream fs = new FileStream("C:\\1.jpg", File ...
- dede 标签调用
调用当前栏目名字 {dede:type}[field:typename /]{/dede:type} 调用某栏目名字 {dede:type typeid='1'}[field:typename /]{ ...
- (转)php中__autoload()方法详解
转之--http://www.php100.com/html/php/lei/2013/0905/5267.html PHP在魔术函数__autoload()方法出现以前,如果你要在一个程序文件中实例 ...
- （转）Android Touch事件传递机制
-----来源:http://www.trinea.cn/android/touch-event-delivery-mechanism/ 介绍Android Touch事件的传递机制. 不少朋友私信问 ...
- 运用linq查找所有重复的元素
如题: 有一个List<string>类型的List<T> List<String> list = "};` 需要返回结果List包含 {"6& ...
- ASP.NET菜鸟之路之Application小例子
背景 我是一个ASP.NET菜鸟,暂时开始学习ASP.NET,在此记录下我个人敲的代码,没有多少参考价值,请看到的盆友们为我点个赞支持我一下,多谢了. Session介绍 Application对象用 ...
- 模拟vector
实现了vector的模板,insert, erase, push_back, iterator #include<iostream> #include<string.h> #i ...
- window.clearInterval与window.setInterval的用法 定时器的设置
window.setInterval() 功能:按照指定的周期(以毫秒计)来调用函数或计算表达式. 语法:setInterval(code,millisec) code:在指定时间到时要执行的Java ...
- overload and overwrite in C++
1. overload : don't using it in different scope. it will hidden the one in base or global scope. 2. ...