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.经测试,这段代码可 ...
随机推荐
- 昨天做了一个使用javamail发送文件的demo
记录一下过程. 两种版本第一个demo是纯java文件.一个就可以,是我在网上搜索到的,第二个demo是我在ssh框中中写的jsp页面demo 1.java版本: package com.zq.www ...
- 表达式：使用API创建表达式树（1）
表达式树可使用Expressions类的静态工厂方法来创建.这种用API的方式创建给予我们在编程极大的灵活性,MSDN上关于表达式的例子也不少,但在使用过程中还是会遇到许多麻烦,对有的表达式类,介绍得 ...
- Wpf TextChanged事件导致死循环，事件触发循环问题
1.实例: 说明:当TextBox控件的Text内容发生变化时,TextChanged事件触发,并且会立即同步执行. 基于这个特点,设置一个全局变量标识,ChangeTxtB,如果是正在修改txtB的 ...
- NPOI对excel文件的导入导出
现理解:将一个Excel文件(工作簿-IWorkBook)看做是一个你要操作的对象,每个工作簿包含多个工作表(ISheet)对象,每个工作表中又包含多个行对象(IRow),每行又包含多个单元格(ICe ...
- 了解HTML的代码注释
什么是代码注释?代码注释的作用是帮助程序员标注代码的用途,过一段时间后再看你所编写的代码,就能很快想起这段代码的用途. 代码注释不仅方便程序员自己回忆起以前代码的用途,还可以帮助其他程序员很快的读懂你 ...
- model 和 view 实现思考
采用model.view = view 和 view.model=model 进行双向绑定,还有一种方案是采用id号进行绑定,viewmodel的views 和 models 属性存放所有的id 映 ...
- JavaScript--模拟网络爬虫
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- 用jquery修改默认的单选框radio或者复选框checkbox选择框样式
默认的radio和checkbox选框很难看.我去看了一下qq注册的页面.发现单选和复选框并没有用<input>,居然是用是A标签.然后用css背景图片展示选择框,用JavaScript控 ...
- document.all和jq trigger原理
document.all是页面内所有元素的一个集合.如: document.all(0)表示页面内第一个元素document.all可以判断浏览器是否是IE if(document ...
- set_time_limit() 控制页面运行时间
当你的页面有大量数据时,建议使用set_time_limit()来控制运行时间,默认是30s,所以需要你将执行时间加长点,如 set_time_limit(300) ,其中将秒数设为0 ,表示持续运 ...