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.经测试,这段代码可 ...
随机推荐
- 【转】JAVA的StringBuffer类
[转]JAVA的StringBuffer类 StringBuffer类和String一样,也用来代表字符串,只是由于StringBuffer的内部实现方式和String不同,所以StringBu ...
- JavaScript实现弹框
提起JS弹框,我首先想到的是Alert,然后想到的还是Alert,最后我竟然就只知道Alert.然后面试就死在这个Alert上了.恼火. 根据网上各位大神的总结,我整理了一下,也顺便学习了一下. 一. ...
- 关于JPush使用CPU占有率100%的情况
跑模拟器cpu占有率120%+,开始没注意,真机时候手机发烫的厉害,看了下CPU和线程 如图,发现占有率最高的是com.apple.CFSocket.private和org.hxhg.jpush.th ...
- VS2012 ActiveX控件_D接口添加方法事项
自己写的是Clock控件,所以控件的接口是_DClock 使用向导添加方法后,会在紫色区域自动生成红色代码:(添加Hello方法) dispinterface _DClock { properties ...
- JavaScript的“闭包”到底是什么
在JavaScripot函数闭包的定义中,一般都有一个outer 函数,一个inner函数.那么“闭包”到底是指outer函数呢,还是指inner函数? 从官方定义来看,并不清楚:A closure ...
- [置顶] css 背景透明，文字不透明，alpha滤镜，opacity，position:relative;
都知道,在alpha滤镜下,背景透明了,里面的文字也会跟随透明,我们可以设置内容的position为relative可以解决这个问题 但是在position为absolute这么做却没有效果,怎么解决 ...
- jquery 工作空间注册
在一些面向对象的语言中有命名空间的概念,好处就是把不同的类放在不同的文件夹下面,这样就不会发生命名冲突,当然命名空间还有其他的作用. 在这里我们讨论的是在JS中怎么使用命名空间.当然JS并没有提供原生 ...
- id 自增------删除数据后恢复到删除前自增id
删除数据后,执行下面语句: ALTER TBALE TableName AUTO_INCREMENT=1 mysql删除比较 一.DROP drop table tablename 绝招:删除内容和 ...
- CentOS安装rar、unrar解压缩软件的方法
闲话不说,centos上如何安装rar.unrar在线解压缩软件呢?如果您的centos是32位的,执行如下命令: wget http://www.rarsoft.com/rar/rarlinux-3 ...
- Delphi-CompareText 函数
函数名称 CompareText 所在单元 System.SysUtils 函数原型 function CompareText(const S1, S2: string): Integer; 函数功能 ...