表单校验
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单校验</title>
<link href="css/demo.css" rel="stylesheet" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/demo.js"></script>
</head>
<body>
<div class="main">
<div class="top">
<div class="">
<h2>请完善以下信息</h2>
</div>
</div>
<div class="list">
<ul>
<li>
<label>姓名</label>
<input type="text" name="name" class="name" placeholder="输入您的姓名">
<span class="tip-error"></span>
</li>
<li>
<label>手机</label>
<input type="text" name="mobile" class="mobile" placeholder="输入您的手机" >
<span class="tip-error"></span>
</li>
<li>
<label>电子邮箱</label>
<input type="text" name="email" class="email" placeholder="输入您的电子邮箱">
<span class="tip-error"></span>
</li>
<li>
<label>年龄</label>
<input type="text" name="age" class="age" placeholder="输入您的年龄" maxlength="3">
<span class="tip-error"></span>
</li>
<li>
<label>通讯地址</label>
<input type="text" name="address" class="address" placeholder="输入您的通讯地址">
<span class="tip-error"></span>
</li>
<li class="fn-textcenter"><a class="btn-blue btn-submit">提交</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS
ul {
margin: 0;
padding: 0;
list-style: none;
}
.fn-textcenter {
text-align: center;
}
.main {
max-width: 1000px;
margin: 0 auto;
zoom: 1;
}
.main .top {
text-align: center;
}
.list ul li {
padding: 10px;
}
.list ul li label{
width: 30%;
display:inline-block;
padding: 0 10px;
text-align: right;
vertical-align: middle;
}
.list ul li input {
border: 1px solid #e2e2e2;
padding: 5px;
width: 200px;
}
.list ul li .btn-blue {
background: #06a5e1;
color: #fff;
text-align: center;
display: inline-block;
padding: 5px 30px;
cursor: pointer;
border-radius: 5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
}
.list ul li .btn-blue:disabled {
background: #999;
cursor: not-allowed;
}
.list ul li .btn-blue:not([disabled]):hover {
opacity:0.8;
filter:alpha(opacity=80);/* 针对 IE8 以及更早的版本 */
}
.list input:focus {
border-color: #66AFE9;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
outline: 0 none;
}
.list .tip-error {
background-color: #F2DEDE;
border-color: #EED3D7;
color: #B94A48;
vertical-align: middle;
padding: 5px 30px;
display:none;
}
JS
$(function(){
//正则
// var filter = /^[\u4e00-\u9fa5]{2,4}$/;
// var filter = /^((\+?86)|(\(\+86\)))?(13[012356789][0-9]{8}|15[012356789][0-9]{8}|18[02356789][0-9]{8}|147[0-9]{8}|1349[0-9]{7})$/;
//var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
//1、成为焦点 错误提示框隐藏
$(".list li input").on('focus',function(){
$(this).siblings(".tip-error").hide(); //find() next() siblings()
});
//2、失去焦点 1）为空判断 2）格式匹配（正则）
$(".list .name").blur(function(){
var cur = $(this);
var value = cur.val();
var filter = /^[\u4e00-\u9fa5]{2,4}$/; //正则
fromEvent (cur,value,filter,'用户名不能为空','用户名输入错误');
});
$(".list .mobile").blur(function(){
var cur = $(this);
var value = cur.val();
var filter = /^((\+?86)|(\(\+86\)))?(13[012356789][0-9]{8}|15[012356789][0-9]{8}|18[02356789][0-9]{8}|147[0-9]{8}|1349[0-9]{7})$/; //正则
fromEvent (cur,value,filter,'手机号不能为空','手机号输入错误');
});
$(".list .email").blur(function(){
var cur = $(this);
var value = cur.val();
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; //正则
// if(value ==''){
// $(this).siblings(".tip-error").show().text("邮箱不能为空");
// }else if(!filter.test(value)){ //正则匹配
// $(this).siblings(".tip-error").show().text("邮箱输入错误");
// }else {
// $(this).siblings(".tip-error").hide();
// };
fromEvent (cur,value,filter,'邮箱不能为空','邮箱输入错误');
});
//公共方法
function fromEvent (cur,value,filter,text1,text2){
if(value ==''){
cur.siblings(".tip-error").show().text(text1);
}else if(!filter.test(value)){ //正则匹配
cur.siblings(".tip-error").show().text(text2);
}else {
cur.siblings(".tip-error").hide();
}
};
//3、提交 （AJAX)
$(".list .btn-submit").on('click',function(){
var _name = $.trim($(".name").val()),
_mobile = $.trim($(".mobile").val()),
_email = $.trim($(".email").val()),
_age = $.trim($(".age").val()),
_address = $.trim($(".address").val());
var data ={
name:_name,
mobile:_mobile,
email:_email,
age:_age,
address:_address
};
if(_name==''|| _mobile=='' || _email =='' || $(".tip-error").is(":visible")) {
alert("请输入正确信息");
}else {
$.ajax({
type: "POST", //请求方式
url: "http://localhost:3000/form_info", //请求路径
async: true, //异步
data: data, //传参
dataType: 'json', //返回值类型
success: function (msg) {
if(msg.code =='200'){
}
},
error: function () {
}
});
}
})
})
面向对象
var obj = {
init:function(){
this.bind();
this.todoAjax();
},
formEvent:function(cur,value,filter,text1,text2){
if(value ==''){
cur.siblings(".tip-error").show().text(text1);
}else if(!filter.test(value)){ //正则匹配
cur.siblings(".tip-error").show().text(text2);
}else {
cur.siblings(".tip-error").hide();
}
},
bind:function (){
var self = this;
//1、成为焦点 错误提示框隐藏
$(".list li input").on('focus',function(){
$(this).siblings(".tip-error").hide(); //find() next() siblings()
});
//2、失去焦点 1）为空判断 2）格式匹配（正则）
$(".list .name").blur(function(){
var cur = $(this);
var value = cur.val();
var filter = /^[\u4e00-\u9fa5]{2,4}$/; //正则
self.formEvent (cur,value,filter,'用户名不能为空','用户名输入错误');
});
$(".list .mobile").blur(function(){
var cur = $(this);
var value = cur.val();
var filter = /^((\+?86)|(\(\+86\)))?(13[012356789][0-9]{8}|15[012356789][0-9]{8}|18[02356789][0-9]{8}|147[0-9]{8}|1349[0-9]{7})$/; //正则
self.formEvent (cur,value,filter,'手机号不能为空','手机号输入错误');
});
$(".list .email").blur(function(){
var cur = $(this);
var value = cur.val();
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; //正则
if(value ==''){
$(this).siblings(".tip-error").show().text("邮箱不能为空");
}else if(!filter.test(value)){ //正则匹配
$(this).siblings(".tip-error").show().text("邮箱输入错误");
}else {
$(this).siblings(".tip-error").hide();
};
self.formEvent (cur,value,filter,'邮箱不能为空','邮箱输入错误');
});
},
todoAjax:function (){
$(".list .btn-submit").on('click',function(){
var _name = $.trim($(".name").val()),
_mobile = $.trim($(".mobile").val()),
_email = $.trim($(".email").val()),
_age = $.trim($(".age").val()),
_address = $.trim($(".address").val());
var data ={
name:_name,
mobile:_mobile,
email:_email,
age:_age,
address:_address
};
if(_name==''|| _mobile=='' || _email =='' || $(".tip-error").is(":visible")) {
alert("请输入正确信息");
}else {
$.ajax({
type: "POST", //请求方式
url: "http://localhost:3000/form_info", //请求路径
async: true, //异步
data: data, //传参
dataType: 'json', //返回值类型
success: function (msg) {
if(msg.code =='200'){
}
},
error: function () {
}
});
}
})
}
}
$(function(){
obj.init();
})
var obj = {
init:function(){
this.bind();
this.todoAjax();
},
formEvent:function(cur,value,name,reg) {
if(value ==''){
cur.siblings(".tip-error").show().text(name + "不能为空！");
}else if(!reg.test(value)){ //正则匹配
cur.siblings(".tip-error").show().text(name + "输入错误！");
}else {
cur.siblings(".tip-error").hide();
}
},
bind:function(){
var self = this;
//1、成为焦点 错误提示框隐藏
$(".list li input").on('focus',function(){
$(this).siblings(".tip-error").hide(); //find() next() siblings()
});
//2、失去焦点 1）为空判断 2）格式匹配（正则）
$(".list input").blur(function () {
var name = $(this).prev().text();
var reg;
switch ($(this).attr("name")) {
case "name":
reg = /^[\u4e00-\u9fa5]{2,4}$/;
break;
case "mobile":
reg = /^((\+?86)|(\(\+86\)))?(13[012356789][0-9]{8}|15[012356789][0-9]{8}|18[02356789][0-9]{8}|147[0-9]{8}|1349[0-9]{7})$/;
break;
case "email":
reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
break;
case "age":
reg = /^(?:[1-9]?\d|100)$/;
break;
}
self.formEvent($(this), $(this).val(), name, reg)
});
},
todoAjax:function (){
$(".list .btn-submit").on('click',function(){
var _name = $.trim($(".name").val()),
_mobile = $.trim($(".mobile").val()),
_email = $.trim($(".email").val()),
_age = $.trim($(".age").val()),
_address = $.trim($(".address").val());
var data ={
name:_name,
mobile:_mobile,
email:_email,
age:_age,
address:_address
};
if(_name==''|| _mobile=='' || _email =='' || $(".tip-error").is(":visible")) {
alert("请输入正确信息");
}else {
$.ajax({
type: "POST", //请求方式
url: "http://localhost:3000/form_info", //请求路径
async: true, //异步
data: data, //传参
dataType: 'json', //返回值类型
success: function (msg) {
if(msg.code =='200'){
}
},
error: function () {
}
});
}
})
}
}
$(function(){
obj.init();
})
function base () {
var self = this;
this.blur_name = function(){
var cur = $(this);
var value = cur.val();
var filter = /^[\u4e00-\u9fa5]{2,4}$/; //正则
self.formEvent(cur,value,filter,"用户名不能为空","用户名错误");
};
this.blur_mobile = function(){
var cur = $(this);
var value = cur.val();
var filter = /^((\+?86)|(\(\+86\)))?(13[012356789][0-9]{8}|15[012356789][0-9]{8}|18[02356789][0-9]{8}|147[0-9]{8}|1349[0-9]{7})$/;
self.formEvent(cur,value,filter,"手机号不能为空","手机号错误");
}
this.blur_email = function(){
var cur = $(this);
var value = cur.val();
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; //正则
self.formEvent(cur,value,filter,"邮箱不能为空","邮箱错误");
}
this.formEvent= function(cur,value,filter,text1,text2){
if(value==''){
cur.siblings(".tip-error").show().text(text1)
}else if(!filter.test(value)){ //正则匹配
cur.siblings(".tip-error").show().text(text2)
}else {
cur.siblings(".tip-error").hide();
}
}
}
function bind(){
var self = this;
this.init = function(){
//1、成为焦点，错误提示隐藏
$(".list ul li input").focus(function(){
$(this).siblings(".tip-error").hide();
});
//2、失去焦点，1）是否为空 2）格式校验
$(".name").blur(this.blur_name);
$(".mobile").blur(this.blur_mobile);
$(".email").blur(this.blur_email);
//3）提交 判断
$(".btn-submit").click(function(){
var _name=$.trim($(".name").val()),
_mobile=$.trim($(".mobile").val()),
_email=$.trim($(".email").val()),
_age=$.trim($(".age").val()),
_address=$.trim($(".address").val());
var data = {
name:_name,
mobile:_mobile,
email:_email,
age:_age,
address:_address
};
if(_name=="" || _mobile==""||_email=="" || $(".tip-error").is(":visible")){
alert("请输入正确信息");
}else {
$.ajax({
type:"post",//请求方式
url: "http://localhost:3000/form_info", //请求路径
data:data,//传参数
dataType:"json",
success:function(msg){
console.log(msg);
},
error:function(error){
cosnole.log(error);
}
})
}
})
}
}
$(function(){
bind.prototype = new base();
var valid = new bind();
valid.init();
})
作者：德乌姆列特
本博客所有文章仅用于学习、研究和交流目的，欢迎非商业性质转载。
博主的文章没有高度、深度和广度，只是凑字数。由于博主的水平不高，不足和错误之处在所难免，希望大家能够批评指出。
博主是利用读书、参考、引用、抄袭、复制和粘贴等多种方式打造成自己的文章，请原谅博主成为一个无耻的文档搬运工！
