form表单非空验证

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}$/;// 定义一个变量  默认为truevar 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默认只支持getdata:{email:encodeURIComponent(emailVal),//encodeURIComponent(str)  对字符串编码name:encodeURIComponent(nameVal),phone:phoneVal                     },dataType:'jsonp',  // 跨域的解决方案  jsonpjsonpCallback: "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>

form表单非空验证相关推荐

antd vue表单验证_antd-for-vue 表单验证失效自定义表单验证使表单非空验证失效（其他验证失效）...
## antd-for-vue 表单验证失效自定义表单验证使表单非空验证失效(其他验证失效) ##### antd 的表单校验方法包括 validateFields 和 validateField ...
javascript 校验非空_JavaScript_form表单非空验证；
=>HTML文比抖朋要插支一圈不者地件表单验证_密码验证 YourName: ChooseAPassword: VerifyPassword: =>样式文件 body { color: ...
html form提交前验证,form表单提交前验证实现方法
form表单提交前验证实现方法2017-11-26 20:54 form表单提交是网站中最常见的,基本上所有的网站都会用到. 除非你就一些静态网页,仅仅是展示,而不需要互动,所以不需要提交表单. 但是 ...
跟杨春娟学SpringMVC笔记：Form表单之JSR303验证
跟杨春娟学SpringMVC笔记:Form表单之JSR303验证完成:第一遍 1.如何使用JSR303验证要先导入validation-api和hibernate-validator的依赖jar包? ...
跟杨春娟学SpringMVC笔记：Form表单之Spring验证框架
跟杨春娟学SpringMVC笔记:Form表单之Spring验证框架完成:第一遍 1.Spring框架验证和JSR303验证的不同之处在哪里? 不同一:Spirng框架验证需要实现Validator ...
如何在 HTML form 表单提交时验证信息！？
前言:平常老用ajax直接向后台传数据,form 表单不常用都生疏了,今天遇到了一个相关问题,搞了半天,特此记录. 用from表单提交,会遇到一个问题就是,当你点击提交按钮时,直接就把数据传过去了,无 ...
element-ui form表单如何逐个验证
1.背景: 使用element-ui的form表单校验功能时,点击提交会对所有要校验的值进行校验,如下图: 虽然提示了要必须填写的值,但是不太美观,产品经理要求点击提交只提示最先校验的那个,如下图 2 ...
JavaScript之form表单提交前验证的onSubmit事件
在前端使用JavaScript验证表单数据时,对验证不通过的form表单要阻止其提交到后台.这时,可以使用onSubmit事件来阻止其提交. <form method="post&qu ...
html form表单提交前验证
可以使用form表单的onsubmit方法,在提交表单之前,对表单或者网页中的数据进行检验. onsubmit指定的方法返回true,则提交数据:返回false不提交数据. <HTML>& ...

form表单非空验证

form表单非空验证相关推荐

最新文章

热门文章