JQuery案例之表单校验

最新推荐文章于 2023-08-22 20:47:45 发布

小蝌蚪找玛玛

最新推荐文章于 2023-08-22 20:47:45 发布

阅读量170

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/weixin_44679832/article/details/90740550

版权

JQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

参考文章：https://www.cnblogs.com/hellowzl/p/5612122.html

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery案例之表单校验</title>
<!--  <link rel="stylesheet" href="../css/style.css"/> -->
<style type="text/css">
    .int {
	height: 30px;
	text-align: left;
	width: 600px;
    }
	
    label {
	width: 200px;
	margin-left: 20px;
    }
	
    .high {
	color: red;
    }
	
    .formtips {
	width: 200px;
	margin: 2px;
	padding: 2px;
    }
	
    .onError {
	background: #FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
	padding-left: 25px;
    }
	
    .onSuccess {
	background: #E9FBEB url(../img/reg4.gif) no-repeat 0 center;
	padding-left: 25px;
    }
</style>

<!-- 导入JQ文件 -->
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
    
    // 文档加载完成事件
    $(function(){
        
        // 在所有必填项后面添加一个小红点
	$(".required").after("&nbsp;<strong class='high'>*</strong>");
		
	// 为表单的必填文本框添加失去焦点事件
	$(".required").blur(function(){
			
	    // 首先获取用户当前输入的值
	    var value = this.value;
			
	    // 删除以前的提示信息
	    $(this).parent().find(".formtips").remove();
			
	    // 验证姓名
	    if ($(this).is("#username")) {
	        if (value == "") {
		    $(this).parent().append("<span class='formtips onError'>用户名不能为空</span>");
		} else if (value.length < 6) {
		    $(this).parent().append("<span class='formtips onError'>用户名的长度必须等于或大于六位</span>");
		} else {
		    $(this).parent().append("<span class='formtips onSuccess'>用户名正确</span>");
		}
	    }
			
	    // 验证邮箱
	    if ($(this).is("#email")) {
		var regEmail = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
		if (value == "") {
		    $(this).parent().append("<span class='formtips onError'>邮箱不能为空</span>");
		} else if (regEmail.test(value) == false) { // 用.test来检测是否符合设置的正则表达式
		    $(this).parent().append("<span class='formtips onError'>邮箱格式不正确,请重新输入</span>");
		} else {
		    $(this).parent().append("<span class='formtips onSuccess'>邮箱格式正确</span>");
		}
	    }
        }).keyup(function(){
            // triggerHandler 防止事件执行完后，浏览器自动为标签获得焦点
	    $(this).triggerHandler("blur");
	}).focus(function(){
	    $(this).triggerHandler("blur");
	});
		
	// 给表单提交绑定事件
	$("form").submit(function(){
			
	    // 触发所有必填文本框的校验
	    $(".required").trigger("blur");
			
	    // 找到错误信息的个数
	    if ($('.onError').length > 0) {
	        return false;
	    }

	    // return true;
            alert("注册成功!");
	});
    });
</script>
</head>
<body>
    <form action="#">
	<div class="int">
	    <label for="name">姓名：</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="address">住址：</label> 
	    <input type="text" id="address" />
        </div>
	<div class="int">
	    <input type="submit" value="提交" id="send" style="margin-left: 120px;" />
	</div>
    </form>
</body>
</html>

小蝌蚪找玛玛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery案例之表单校验

参考文章：https://www.cnblogs.com/hellowzl/p/5612122.html代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JQuery案例之表单校验</title><!-- <link re...
复制链接

扫一扫