<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. A - 不要62 HDU - 2089

    #include<stdio.h> #include<string.h> #include<math.h> #include<time.h> #incl ...

  2. 放大镜jQuery效果

    今天我们来写一下jQuery的效果来上代码 1,html代码 <div id='small'><img src="./icon/images/sj1.jpg" a ...

  3. 开源项目Zookeeper、Doozer、etcd进行总结

    Jason Wilder的一篇博客对分别对常见的服务发现开源项目Zookeeper.Doozer.etcd进行了总结介绍: Zookeeper是一个用户维护配置信息.命名.分布式同步以及分组服务的集中 ...

  4. Alpha阶段敏捷冲刺

    博客连链接集合 第一篇:http://www.cnblogs.com/just-let-it-go/p/8875433.html 第二篇:http://www.cnblogs.com/just-let ...

  5. JAVA中经过nginx反向代理获取客户端ip并获取相关坐标等信息

    关于搜狐新浪ip库查询接口的使用 直接输出访客ip及所在城市: <script src="http://pv.sohu.com/cityjson?ie=utf-8" > ...

  6. STL 小白学习（2） string

    #include <iostream> using namespace std; #include <string> //初始化操作 void test01() { //初始化 ...

  7. .net Monitor产生SynchronizationLockException异常的原因

    有时在使用Monitor进行并发同步编程时,会产生SynchronizationLockException异常,抛出的异常内容是"Object synchronization method ...

  8. Beta 冲刺 （3/7）

    Beta 冲刺 (3/7) 队名:第三视角 组长博客链接 本次作业链接 团队部分 团队燃尽图 工作情况汇报 张扬(组长) 过去两天完成了哪些任务 文字/口头描述 参与开发关键词提醒部分 展示GitHu ...

  9. python if __name__=='__main__'的理解

    定义一个模块叫module.py: def main(): print "we are in %s" %__name__ if __name__=='__main__': main ...

  10. Shell 变量替换及测试

    声明:$ 后面跟linux可执行命令 一.变量替换                   语法                      说明 ${变量名#匹配规则} 从变量的开头进行规则匹配,将符合最 ...