<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. JS中for in 与 for of

    // 数组var A=[4,6,74,67]; for in:拿到的是数组下标 for (let i in A){ console.log(i); } //0,1,2,3 for of:拿到的是数组元 ...

  2. [Hibernate] 通过 properties 类和 hql 语句进行动态查询

    //需要保证Emp和EmpProperties中的setter和getter以及属性以及 参数占位符(:eName) 的一致//动态查询 @Test public void test4(){ EmpP ...

  3. Symbol Vs String

    最重要区别 1 symbol存入内存后,始终存在,如果不进行垃圾收集,可能导致内存泄漏. String只会存在于某个创建它的作用域内.即有生命周期的. 2.唯一性. \\进入控制台 >" ...

  4. php 中swoole安装

    1.下载扩展包: 网址:http://pecl.php.net/ 中(http://pecl.php.net/get/swoole-4.3.1.tgz) 2.解压安装包. 3.进入解压好的安装包. 4 ...

  5. JS正则表达式分组模式

    分组的概念 分组就是在正则表达式中用()包起来的内容代表了一个分组,如下: var reg=/([0-9]{3})([a-z]{2})/ var str="123ab" conso ...

  6. STL标准库-容器-deque 双端队列

    头文件: #include<deque> 常用操作: https://www.cnblogs.com/LearningTheLoad/p/7450948.html

  7. 页面检测网络外网连接- 网页基础模块（JavaScript）

    方法一 html 添加图片标签 加载外站图片 <img id="connect-test" style="display:none;" onload=&q ...

  8. 946. Validate Stack Sequences验证栈序列

    网址:https://leetcode.com/problems/validate-stack-sequences/ 参考:https://leetcode.com/problems/validate ...

  9. mac上配置java开发环境

    项目在mac上跑起来的步骤: 1. 访问,https://brew.sh/  装上这个然后  brew install git  brew install maven, settings.xml需要放 ...

  10. Python-接口自动化（一）

    python基础知识(一) 一.python语言特点 1.易于学习:python有相对较少的关键字,结构简单,有一个明确定义的语法,学起来比较简单: 2.易于阅读:python代码定义的更清晰: 3. ...