form表单非空验证

最新推荐文章于 2024-08-11 15:42:10 发布

学习代表未来

最新推荐文章于 2024-08-11 15:42:10 发布

阅读量1.2w

点赞数 4

分类专栏： jquery 文章标签： form非空验证

本文链接：https://blog.csdn.net/weixin_39907729/article/details/81512744

版权

jquery 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

1.在<head>里面引入jquery.js

<script src="jquery.js"></script>

2.dom元素如下

<div class="register">
	<form>
		<p class="info"></p>

		<div class="content">
			<div>
				<input type="text" placeholder="注册邮箱" name="email">
				<span class="email"></span>
			</div>
			<div>
				<input type="text" placeholder="姓名" name="name">
				<span class="name"></span>
			</div>
			<div>
				<input type="text" placeholder="电话" name="phone">
				<span class="phone"></span>
			</div>
			<input type="button" value="提交">
		</div>	
	</form>		
</div>

3.实现步骤

<script>
		
		$(".register input[type='button']").click(function(){
 
		var email = $("input[name='email']");      
		var emailVal = $.trim(email.val());
 
		var name = $("input[name='name']");      
		var nameVal = $.trim(name.val());
 
		var phone = $("input[name='phone']");      
		var phoneVal = $.trim(phone.val());
 
        // 邮箱正则匹配
		var reg=/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-_.])+[A-Za-z\d]{2,4}$/;
 
        // 定义一个变量  默认为true
		var flag=true;
 
		if(emailVal == '' || emailVal == null) {
	
			$(".email").html("邮箱不能为空！");
		flag=false;
		
		}else if(!reg.test(emailVal)){
			
			$(".email").html("请输入正确格式！");
			flag=false;
		}else{
			$(".email").html("");
		
		}
 
		if(nameVal == '' || nameVal == null) {
	
			$(".name").html("用户名不能为空！");
			flag=false;                  
		}else{
			$(".name").html("");         
		}
 
		if(phoneVal == '' || phoneVal == null) {
	
			$(".phone").html("电话不能为空！");
			flag=false;
		
		}else{
			$(".phone").html("");
		
		}
 
        // 当flag 为true时,才进行数据的提交 （内容根据自己的业务需求进行编写）    
		if(flag == true){
 
            // 下面的代码是ajax跨域的解决方案
			$.ajax({
				url:'xxx',						
				type:'get', // jsonp默认只支持get
				data:{
				email:encodeURIComponent(emailVal),//encodeURIComponent(str)  对字符串编码
				name:encodeURIComponent(nameVal),
				phone:phoneVal						
				},
				dataType:'jsonp',  // 跨域的解决方案  jsonp
				jsonpCallback: "callback",
				success:function(data){				
					if(data.code == '200'){
						$(".register .content").hide();
						$(".register .info").html("报名成功");
					}else if(data.code == '203'){
						$(".register .info").html("用户不存在");
					}else if(data.code == '205'){
						$(".register .info").html("已参与该活动");
					}else if(data.code == '206'){
						$(".register .info").html("活动报名未开始");
					}else if(data.code == '207'){
						$(".register .info").html("活动报名已结束");
					}else{
						$(".register .info").html("报名失败");
					}

				}
			})
		}
	})



</script>