<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. DAY6 元组、字典与集合

    一.元组 定义:t1 = (1, 2) # t1 = tuple((1,2)) 特点:有序存储.可存放多个数据.不可变(内部可以包含可变对象,可变对象已久可变) 应用场景:将不允许操作的列表可以转化为 ...

  2. 更改ssh,ftp默认端口

    1.  更改ssh端口 放置升级openssh之后做此步骤 配置文件/etc/ssh/sshd_config 注释掉Subsystem      sftp    /usr/libexec/openss ...

  3. [python]PyPI使用国内源

    PyPI使用国内源 对于默认的pip源的速度太慢,一些国内的pip源,如下: 豆瓣(douban) https://pypi.douban.com/simple 阿里云 http://mirrors. ...

  4. SSH 远程登陆

    2019-03-10 20:41:39 一.什么是SSH 简单说,SSH是一种网络协议,用于计算机之间的加密登录. 如果一个用户从本地计算机,使用SSH协议登录另一台远程计算机,我们就可以认为,这种登 ...

  5. 第K个幸运数字（4、7）

    题目:4和7是两个幸运数字,我们定义,十进制表示中,每一位只有4和7两个数的正整数都是幸运数字,前几个幸运数字为:4,7,44,47,74,77,444,447······输出第K个数字. 思路是:将 ...

  6. tensorflow world language model

    上文提到了pytorch里的world language model,那么怎么能不说tensorflow的实现呢,还是以tensorflow ptb的代码为例说说. 地址: https://githu ...

  7. Tomcat 中 jsp 中文乱码显示处理解决方案

    原地址: http://blog.csdn.net/joyous/article/details/1504274 初学JSP,尤其是Tomcat环境(GlassFish默认UTF-8,则不存在此类问题 ...

  8. 在Postman中使用不受信任的SSL证书（转）

    add by zhj: 在http://www.cnblogs.com/ajianbeyourself/p/3898911.html中提到: 对于不受信任的证书,浏览器会发出告警,不过这些也只是告警而 ...

  9. 使用ssm（spring+springMVC+mybatis）创建一个简单的查询实例（三）（错误整理篇）

    使用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(一) 使用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(二) 以上两篇已经把流 ...

  10. 阶段01Java基础day24多线程+GUI

    25.01_多线程(多线程方法) 1.yield让出cpu 2.setPriority()设置线程的优先级 25.02_多线程(单例设计模式)(掌握) 单例设计模式:保证类在内存中只有一个对象. 如何 ...