<html>
  <head>
  <title>表单页面</title>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   
  <script>
  function checkData(){
  var canSub = true;
   
  //非空校验
  canSub = checkNull("username","用户名不能为空！") && canSub;
  canSub = checkNull("password","密码不能为空！")&& canSub;
  canSub = checkNull("password2","确认密码不能为空！")&& canSub;
  canSub = checkNull("nickname","昵称不能为空！")&& canSub;
  canSub = checkNull("email","邮箱不能为空！")&& canSub;
  canSub = checkNull("valistr","验证码不能为空！")&& canSub;
  canSub = checkNull("img","头像不能为空！")&& canSub;
  //描述信息非空校验
  document.getElementById("desc_msg").innerText = "";
  var desc = document.getElementsByName("desc")[0];
  if(desc.value == "请输入描述信息~！"){
  document.getElementById("desc_msg").innerText = "描述信息不能为空！";
  canSub = false;
  }
   
  //爱好非空校验
  document.getElementById("like_msg").innerText = "";
  var likes = document.getElementsByName("like");
  var hasLike = false;
  for(var i = 0;i<likes.length;i++){
  if(likes[i].checked == true){
  hasLike = true;
  break;
  }
  }
  if(!hasLike){
  document.getElementById("like_msg").innerText = "爱好不能为空！";
  canSub = false;
  }
   
  //性别非空校验
  document.getElementById("gender_msg").innerText = "";
  var genders = document.getElementsByName("gender");
  var hasGender = false;
  for(var i = 0;i<genders.length;i++){
  if(genders[i].checked == true){
  hasGender = true;
  break;
  }
  }
  if(!hasGender){
  document.getElementById("gender_msg").innerText = "性别不能为空！";
  canSub = false;
  }
   
  //两次密码一致的校验
  var psw1 = document.getElementsByName("password")[0].value;
  var psw2 = document.getElementsByName("password2")[0].value;
  if(psw1 != "" && psw2 !="" && psw1 != psw2){
  document.getElementById("password2_msg").innerText = "两次密码不一致！";
  canSub = false;
  }
   
  //邮箱格式的校验
  var email = document.getElementsByName("email")[0].value;
  if(email.value != "" && !/^\w+@\w+(\.\w+)+$/.test(email)){
  document.getElementById("email_msg").innerText = "邮箱格式不正确！";
  canSub = false;
  }
   
  return canSub;
  }
   
  /*检验非空公共方法*/
  function checkNull(name,msg){
  document.getElementById(name+"_msg").innerText = "";
  var tag = document.getElementsByName(name)[0];
  if(tag.value == ""){
  document.getElementById(name+"_msg").innerText = msg;
  return false;
  }
  return true;
  }
   
  //描述信息处理
  function descFocus(obj){
  if(obj.value == "请输入描述信息~！"){
  obj.value = "";
  }
  }
  function descBlur(obj){
  if(obj.value == ""){
  obj.value = "请输入描述信息~！";
  }
  }
  </script>
  <style type="text/css">
  span{
  color:red;
  font-size:12px;
  }
  </style>
  </head>
  <body>
  <form action="http://localhost:8080" method="POST" onsubmit="return checkData()">
  <table border="1px" align="center" cellpadding="10px" cellspacing="0px" borderColor="red" bgcolor="pink">
  <caption><font color="red" size="6">注册表单</font></caption>
  <input type="hidden" name="id" value="9527"/>
  <tr>
  <td>用户名:</td>
  <td><input type="text" name="username" /> <span id="username_msg"></span></td>
  </tr>
  <tr>
  <td>密码:</td>
  <td><input type="password" name="password"/> <span id="password_msg"></span></td>
  </tr>
  <tr>
  <td>确认密码:</td>
  <td><input type="password" name="password2"/> <span id="password2_msg"></span></td>
  </tr>
  <tr>
  <td>性别：</td>
  <td>
  <input type="radio" name="gender" value="男"/>男
  <input type="radio" name="gender" value="女"/>女 <span id="gender_msg"></span>
  </td>
  </tr>
  <tr>
  <td>昵称：</td>
  <td><input type="text" name="nickname"/> <span id="nickname_msg"></span></td>
  </tr>
  <tr>
  <td>邮箱：</td>
  <td><input type="text" name="email"/> <span id="email_msg"></span></td>
  </tr>
  <tr>
  <td>爱好：</td>
  <td>
  <input type="checkbox" name="like" value="lq"/>篮球
  <input type="checkbox" name="like" value="zq"/>足球
  <input type="checkbox" name="like" value="qq"/>铅球
  <input type="checkbox" name="like" value="blq"/>玻璃球
  <span id="like_msg"></span>
  </td>
  </tr>
  <tr>
  <td>客户类型：</td>
  <td>
  <select name="type">
  <option value="pm">平民</option>
  <option value="sxdy">少先队员</option>
  <option value="gqty">共青团员</option>
  <option value="ybdy">预备党员</option>
  <option value="zsdy">正式党员</option>
  </select>
  <span id="type_msg"></span>
  </td>
  </tr>
  <tr>
  <td>头像：</td>
  <td>
  <input type="file" name="img"/> <span id="img_msg"></span>
  </td>
  </tr>
  <tr>
  <td>描述信息：</td>
  <td>
  <textarea id="desc" rows="5" cols="45" name="desc" onfocus="descFocus(this)" onblur="descBlur(this)">请输入描述信息~！</textarea> <br/><span id="desc_msg"></span>
  </td>
  </tr>
  <tr>
  <td>验证码：</td>
  <td>
  <input type="text" name="valistr"/>
  <img src="1.jpg" width="100px" height="20px"/>
  <span id="valistr_msg"></span>
  </td>
  </tr>
  <tr>
  <td colspan="2" align="right">
  <input type="submit" value="提 交"/>
  <input type="reset" value="重 置"/>
  </td>
  </tr>
  </table>
  </form>
  </body>
  </html>

js实现表单的更多相关文章

  1. js验证表单大全

    js验证表单大全 1. 长度限制 <script> function test() { if(document.a.b.value.length>50) { alert(" ...

  2. JS 更改表单的提交时间和Input file的样式

    JS转换时间 function renderTime(data) { var da = eval('new ' + data.replace('/', '', 'g').replace('/', '' ...

  3. js动态控制表单表格

    js动态控制表单表格,这里操作只讲,添加一行,删除一行,删除某一行某一列. 直接放代码: <!DOCTYPE html> <html> <head> <met ...

  4. jquery.form.js 让表单提交更优雅

    jquery.form.js 让表单提交更优雅.可以页面不刷新提交表单,比jQuery的ajax提交要功能强大. 1.引入 <script src="/src/jquery-1.9.1 ...

  5. Vue.js：表单

    ylbtech-Vue.js:表单 1.返回顶部 1. Vue.js 表单 这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. v-mo ...

  6. 利用JS提交表单的几种方法和验证(必看篇)

    第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <scr ...

  7. jquery.validate.js 验证表单时，在IE当中未验证就直接提交的原因

    jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...

  8. ★★★【卡法 常用js库】： js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度

    [卡法 常用js库]: js汇合 表单验证  cookie设置  日期格式  电话手机号码  email  整数  小数  金额   检查参数长度 // +---------------------- ...

  9. js实现表单验证 常用JS表单验证

    CSS代码 @charset "gb2312"; /* CSS Document */ body,dl,dt,dd,div,form {padding:;margin:;} #he ...

  10. springmvc下js控制表单提交（表单提交前检验，提交后获取json返回值）

    这个问题我搞了四天,终于搞懂.因为对js很不熟悉.郁闷的是后台代码出错总可以设置断点调试,前端js代码出错只能通过浏览器提供一些运行数据来分析,很不习惯. 首先说下逻辑:这是一个注册功能,我希望,注册 ...

随机推荐

  1. 【Core】.NET Core 部署（ Docker + CentOS）

    CentOS 下 Docker安装 使用脚本安装 Docker (1)安装docker  sudo yum install docker (2)启动docker systemctl  start do ...

  2. centos 打印机安装方法

    这里安装的是hplip 1.首先确定cups有没有安装 没有的话 yum install cups 安装 2.安装 hplip yum install -y hplip hplip-* 3执行 hp- ...

  3. C# Log4Net 日志

    C#使用Log4Net记录日志 第一步:下载Log4Net            下载地址:http://logging.apache.org/log4net/download_log4net.cgi ...

  4. Practical Node.js (2018版) 第9章： 使用WebSocket建立实时程序，原生的WebSocket使用介绍，Socket.IO的基本使用介绍。

    Real-Time Apps with WebSocket, Socket.IO, and DerbyJS 实时程序的使用变得越来越广泛,如传统的交易,游戏,社交,开发工具DevOps tools, ...

  5. 数据分析库之matplotlib

    一.Matplotlib基础知识 Matplotlib中的基本图表包括的元素 x轴和y轴 axis 水平和垂直的轴线 轴标签 axisLabel 水平和垂直的轴标签 x轴和y轴刻度 tick 刻度标示 ...

  6. Innodb中的行锁与表锁

    在Innodb引擎中既支持行锁也支持表锁,那么什么时候会锁住整张表,什么时候或只锁住一行呢? InnoDB行锁是通过给索引上的索引项加锁来实现的,这一点MySQL与Oracle不同,后者是通过在数据块 ...

  7. python----集合用法总结

    集合也是一种数据类型,一个类似列表东西,它的特点是无序的,不重复的,也就是说集合中是没有重复的数据集合的作用:1.它可以把一个列表中重复的数据去掉,而不需要你再写判断2.可以做关系测试,比如说有两个班 ...

  8. decltype typename

    decltype((variable))总是引用类型,但是decltype(variable)只有当variable是引用类型时才是引用类型. #include <iostream> #i ...

  9. 架构之路：nginx与IIS服务器搭建集群实现负载均衡（二）

    [前言] 在<架构之路:nginx与IIS服务器搭建集群实现负载均衡(一)>中小编简单的讲解了Nginx的原理!俗话说:光说不练假把式.接下来,小编就和大家一起来做个小Demo来体会一下N ...

  10. JQ 向上查找指定 同辈元素 找到后返回

    由于JQ 只有 prev() 和 prevAll() prev()只能找一个 prevAll()把所有的都给找了 我想要的是: 在同辈元素中向上找,直到找到 我指定的元素 后,返回他. 所以自己写了个 ...