您的位置：首页 > Web前端 > JavaScript

javascript面向对象思想做form表单验证代码很精简哦

2015-05-18 19:23 746 查看

<html>

<head>

<meta charset=utf-8 />





<script src="jquery-1.7.2.min.js"></script>

<script>

var obj = {

res : true ,

nick_fun : function(o,tip){

if(this.res==true){

o.siblings("span").css("color","blue");

}else{

o.siblings("span").css("color","red");

}

o.siblings("span").html(tip);

}

}

$(function(){

var regex = new RegExp("^([\u4E00-\uFA29]){1,10}$");

var regmob = /(1[3458]\d{9},)*1[3458]\d{9}/g;

var regem = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

$(".name").blur(function(){

var v = $(this).val();

var re = regex.test(v);

obj.res = re;

re==true ? obj.nick_fun($(this),"姓名输入正确！") : obj.nick_fun($(this),"姓名为汉字！");

})

$(".email").blur(function(){

var v = $(this).val();

var re = regem.test(v);

obj.res = re;

re==true ? obj.nick_fun($(this),"邮箱输入正确！") : obj.nick_fun($(this),"邮箱输入格式不正确！");

})

$(".mobile").blur(function(){

var v = $(this).val();

var re = regmob.test(v);

obj.res = re;

re==true ? obj.nick_fun($(this),"手机号输入正确！") : obj.nick_fun($(this),"手机号输入有误！");

})

})

</script>

</head>

<body>

<form>

<div>姓名：<input type='text' name="name" class="name" /><span></span></div>

<div>邮箱：<input type='text' name="email" class="email" /><span></span></div>

<div>手机号：<input type='text' name="mobile" class="mobile" /><span></span></div>

<input type="button" value="点击" id="ck" />

</form>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

javascript面向对象思想做form表单验证 代码很精简哦

javascript面向对象思想做form表单验证代码很精简哦