<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. ng工程升级cli版本

    全局更新ng 然后在工程里 ng update @angular/cli @angular/core

  2. 文献导读 | A Pan-Cancer Analysis of Enhancer Expression in Nearly 9000 Patient Samples

    Chen, H., Li, C., Peng, X., Zhou, Z., Weinstein, J.N., Liang, H. and Cancer Genome Atlas Research Ne ...

  3. 【快捷键】IntelliJ IDEA For Mac 常用快捷键

    一.符号对应关系 ⌃ control ⌥ option ⌘ command ⇧ shift 二.常用快捷键 1.control+shift+J 两行整理成一行 2.command+shift+F12 ...

  4. python学习（九）

  5. Sumo生成数据

    1.生成input_net.net.xml文件 参数解释:http://www.sumo.dlr.de/userdoc/NETGENERATE.html#Grid_Network 1).生成grid ...

  6. From CSV to SQLite3 by python 导入csv到sqlite

    '''初次使用SQLite,尝试把之前一个csv文件导进去,看了网上各种教程,大多是在SQLite shell模式下使用的,比较麻烦, 这里用了panda,就方便多了,仅作示例供参考. 第一篇开博,想 ...

  7. Attempting to use uninitialized value

    ckpt = tf.train.get_checkpoint_state(FLAGS.model) if ckpt: saver.restore(sess, tf.train.latest_check ...

  8. MinGW-w64安装教程——著名C/C++编译器GCC的Windows版本

    本文主要讲述如何安装 C语言 编译器——MinGW-w64,特点是文章附有完整详细的实际安装过程截图,文字反而起说明提示作用. 编写本文的原因始于我的一个观点:图片可以比文字传达更多的信息,也能让其他 ...

  9. C++ 抽象类与接口

    1. 抽象类  在面向对象编程中,抽象类是一种只能定义类型,不能生成对象的类,它是对一系列看上去不同,但是本质相同的具体概念的抽象.最典型的的抽象类就是”图形”,三角形.矩形.梯形都是图形,它们都具有 ...

  10. HTTP，RFC自学心得

    HTTP协议描述的是:发送方与接收方的通信协议,通过两方的自觉遵守而存在,当然有不少的浏览器并没有百分百遵守这份协议. HTTP是运行于应用层的协议,基于TCP协议而运作.基本上是客户/服务器对答模式 ...