表单验证

最新推荐文章于 2022-06-21 15:54:38 发布

Hole_2013

最新推荐文章于 2022-06-21 15:54:38 发布

阅读量338

点赞数

文章标签： class function input email action div

本文链接：https://blog.csdn.net/kognpengfang/article/details/6980991

版权

<html>
<head>
<title>表单验证</title>
<style type="text/css">
body {
font:12px/19px Arial, Helvetica, sans-serif;
color:#666;
}
form div {
margin:5px 0;
}
.int label{
float:left;
width:100px;
text-align:right;
}
.int label{
height:16px;
}
.sub {
padding-left:100px;
float:left;
}
.sub input {
margin-right:10px;
}
.onError{
background:no-repeat;
background-image:url(img/reg3.gif);
padding-left:25px;
}
.onSuccess{
background:no-repeat;
background-image:url(img/reg4.gif);
padding-left:25px;
}
.high{
color:red;
}
</style>
<script src="scripts/jquery-1.3.1.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
//如果是必填的，则加红色标识
$("form :input.required").each(function(){
  var $required = $("<strong class='high'>*</strong>");//创建元素
  $(this).parent().append($required);
  //然后将它追加到文档中
});
//文本框失去焦点后
$("form :input").blur(function(){
//为表单元素添加失去焦点事件
var $parent = $(this).parent();
$parent.find(".formtips").remove();
//去掉先前的提醒
//验证用户名
if( $(this).is('#username')){
  if( this.value=="" || this.value.length < 6 ){
   var errorMsg = '请输入至少6位的用户名.';
   $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
  }else{
   var okMsg = '输入正确.';
   $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>')
  }
}
//验证邮件
if($(this).is('#email')){
  if( this.value=="" || (this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
   var errorMsg = '请输入正确的E-Mail地址';
   $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
  }else{
   var okMsg = '输入正确.';
   $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
  }
}

}).keyup(function(){
  $(this).triggerHandler("blur");
}).focus(function(){
  $(this).triggerHandler("blur");
});//end blur //如果input按钮type为submit时，手动点击它会自动//提交表单，
//trigger("click")会提交表单，triggerHandler("click")//则不会

//提交，最终验证
$('#send').click(function(){
$("form :input.required").trigger('blur');
var numError = $('form .onError').length;
if(numError){
  return false;
}
alert("注册成功，密码已发到你的邮箱，请查收.");
});
   $('#res').click(function(){
    $(".formtips").remove();
   });
});
</script>
</head>
<body>
<form action="#" method="post" id="">
  <div class="int">
   <label for="username">用户名</label>
   <input type="text" id="username" class="required">
  </div>
  <div class="int">
   <label for="email">邮箱</label>
   <input type="text" id="email" class="required">
  </div>
  <div class="int">
   <label for="personinfo">个人资料</label>
   <input type="text" id="personinfo">
  </div>
  <div class="sub">
   <input type="submit" value="提交" id="send"/>
   <input type="reset" id="res"/>
  </div>
</form>
</body>
</html>

Hole_2013

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单验证

表单验证body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}form div { margin:5px 0; }.int label{float:left;width:100px;text-align:right;}.int label{height:16px;
复制链接

扫一扫