web前端必学功法之一：表单校验（1）

web前端必学功法之一：表单校验

案例效果：

这里的布局采用的是bootstrap布局

    <div class="container" style="margin-top: 60px;"><!-- 表单 --><form class="form-horizontal" role="form" id="myform"><!-- 姓名文本框 --><div class="form-group"><label for="userName"  class="col-sm-2 control-label">名字</label><div class="col-sm-8"><input type="text" class="form-control" id="userName" name="userName" placeholder="请输入姓名"></div></div><!-- 密码密码框 --><div class="form-group"><label for="userPwd" class="col-sm-2 control-label">密码</label><div class="col-sm-8"><input type="password" class="form-control" id="userPwd" name="userPwd" placeholder="请输入密码"></div></div><!-- 年龄数值框 --><div class="form-group"><label for="userAge" class="col-sm-2 control-label">年龄</label><div class="col-sm-8"><input type="number" class="form-control" id="userAge" min="1" max="100" name="userAge" placeholder="请输入年龄"></div></div><!-- 性别复选框 --><div class="form-group"><label for="userSex" class="col-sm-2 control-label">性别</label><div class="col-sm-8"><label class="checkbox-inline"><input type="checkbox" name="userSex"  value="男"> 男</label><label class="checkbox-inline"><input type="checkbox" name="userSex"  value="女"> 女</label><label class="checkbox-inline"><input type="checkbox" name="userSex"  value="未知"> 未知</label></div></div><!-- 爱好复选框 --><div class="form-group"><label for="userHobby" class="col-sm-2 control-label">爱好</label><div class="col-sm-8"><label class="checkbox-inline"><input type="checkbox" name="userHobby"  value="唱歌"> 唱歌</label><label class="checkbox-inline"><input type="checkbox" name="userHobby"  value="睡觉"> 睡觉</label><label class="checkbox-inline"><input type="checkbox" name="userHobby"  value="敲代码">敲代码</label></div></div><!-- 城市下拉框 --><div class="form-group"><label for="userCity" class="col-sm-2 control-label">城市</label><div class="col-sm-8"><select class="form-control" id="userCity" name="userCity"><option value="">-请选择-</option><option value="上海">上海</option><option value="广州">广州</option><option value="深圳">深圳</option><option value="北京">北京</option></select></div></div><!-- 简介文本域 --><div class="form-group"><label for="userRemark" class="col-sm-2 control-label">简介</label><div class="col-sm-8"><textarea class="form-control" name="userRemark" rows="3" id="userRemark"></textarea></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="button" class="btn btn-default" id="submitBtn">提交</button>&nbsp;&nbsp;&nbsp;<span id="msg" style="color: red;"></span></div></div></form></div>

           要求：1.验证姓名1)不能为空 2)长度为6-12位2.验证密码1)不能为空 2)长度为6-12位 3)不能包含姓名3.验证年龄1)不能为空 2)范围在1-100之间4.验证性别必须选择一项5.验证爱好必须选择一项6.验证城市必须选择一项满足条件1)弹出所有的内容   2)提交表单不满足条件1)说错误原因  2)不提交表单思路分析：1.绑定事件，绑定提交按钮的点击事件2.获取表单元素：通过选择器获取3.判断条件：根据要求判断对应的表单元素的值是否满足4.提交表单：调用表单的submit()实现步骤：1.绑定提交按钮的点击事件2.获取每个元素的值3.判断对应的表单元素是否满足条件4.如果不满足条件，则显示错误原因5.如果满足条件，弹出内容，提交表单

    <script>// 表单校验//1.绑定提交按钮的点击事件document.getElementById("submitBtn").onclick = function(){//2.获取每个表单元素的值// 验证姓名// 1)不能为空 2)长度为6-12位// 获取姓名var  userName = document.getElementById("userName").value;// 1)不能为空if(isEmpty(userName)){document.getElementById("msg").innerHTML = "姓名不能为空!";return;}// 2)长度为6-12位if(userName.length < 6 || userName.length > 12){document.getElementById("msg").innerHTML = "姓名的长度在6-12位之间";return;}// 2.验证密码//       1)不能为空 2)长度为6-12位 3)不能包含姓名var userPwd = document.getElementById("userPwd").value;// 1)不能为空if(isEmpty(userPwd)){document.getElementById("msg").innerHTML = "密码不能为空!";return;}// 2)长度为6-12位if(userPwd.length < 6 || userPwd.length > 12){document.getElementById("msg").innerHTML = "密码的长度在6-12位之间";return;}// 3)不能包含姓名  indexOf();判断字符串中是否包含指定值，如果不包含则返回-1if(userPwd.indexOf(userName) != -1){document.getElementById("msg").innerHTML = "密码中不能包含姓名在内";  }// 验证年龄//       1)不能为空 2)范围在1-100之间var  userAge = document.getElementById("userAge").value;// 1)不能为空if(isEmpty(userAge)){document.getElementById("msg").innerHTML = "年龄不能为空!";return;}// 2)范围在1-100之间if(userAge <1 || userAge > 100){document.getElementById("msg").innerHTML = "年龄范围在1-100之间";return;}// 验证性别//       必须选择一项//获取性别var userSex = "";//获取性别单选框var radios = document.getElementsByName("userSex");//遍历,得到被选中的值for(var i = 0;i<radios.length; i++){//判断是否选中if(radios[i].checked){userSex = radios[i].value;}}// 1)不能为空if(isEmpty(userSex)){document.getElementById("msg").innerHTML = "请选择性别!";return;}// 5.验证爱好//       必须选择一项var  userHobby = "";var  checkboxs = document.getElementsByName("userHobby");//遍历，得到被选中的值for(var j = 0;j<checkboxs.length;j++){//判断是否被选中if(checkboxs[j].checked){//拼接爱好userHobby += checkboxs[j].value + ",";}}// 1)不能为空if(isEmpty(userHobby)){document.getElementById("msg").innerHTML = "请选择爱好!";return;}//截取字符串，去除最后多余的“,”;userHobby = userHobby.substring(0,userHobby.length - 1);// 验证城市//       必须选择一项// 获取城市var userCity = document.getElementById("userCity").value;// 1)不能为空if(isEmpty(userCity)){document.getElementById("msg").innerHTML = "请选择城市!";return;}//获取简介var userRemark  = document.getElementById("userRemark").value;//满足条件，则清空提示信息document.getElementById("msg").innerHTML = "";//弹出所有的内容var str = "姓名:" + userName + "\n密码:" + userPwd + "\n";str +="年龄:" + userAge  + "\n性别:" +  userSex + "\n";str +="爱好" + userHobby + "\n城市" +  userCity +"\n";str +="简介" + userRemark;alert(str);// 设置表单提交的地址document.getElementById("myform").action = "http://www.baidu.com";//提交表单document.getElementById("myform").submit();}// 封装一个方法,用来进行非空判断// 判断字符串是否为空// 如果为空,返回true,// 如果不为空,返回false// trim()：去除字符串前后空格function isEmpty(str){if(str == null || str.trim() ==""){return true;}return false;}</script>

web前端必学功法之一：表单校验（1）相关推荐

web前端必学功法之一：表单校验（2）
web前端必学功法之一:表单校验(2) 这里采用另一种写法,jQuery写法,在用jQuery写法之前,一定要引入jquery.js. <div class="container&qu ...
web前端必学功法之一：留言板
web前端必学功法之一:留言板案例效果: css部分 <style>.container{width: 600px;}.mes-board{margin: 25px 0;padding: ...
web前端必学功法之一：用户选择爱好
web前端必学功法之一:用户选择爱好案例实现效果: 首先做这个页面效果,我们要把页面布局给写好,每个网站做好页面可以解决很大的问题. css代码,这里的页面采用Grid布局 <style> ...
web前端必学功法之一：轮播图
web前端必学功法之一:轮播图效果演示: <style>* {margin: 0;padding: 0;}/* 去除a标签的下划线 */a {text-decoration: none; ...
web前端必学功法之一：省市联动
web前端必学功法之一:省市联动案例:js实现下面功能 **<!-- 省市联动思路分析:1.准备元素:定义省份与城市的下拉框2.绑定事件:绑定省份下拉框的change事件3.准备数据:准备数组 ...
web前端必学功法之一：秒表实现
web前端必学功法之一:秒表实现功能案例: css样式:<style>.date{width: 200px;height: 50px;background-color: black;bo ...
web前端必学功法之一：五星好评
web前端必学功法之一:五星好评案例效果: <!--思路分析:1.设置鼠标样式,当鼠标放到星星上时,修改鼠标的样式2.定义元素:通过表格的td元素来存放星星3.绑定事件:绑定每一个星星的鼠标悬 ...
web前端知识（04html的表单）
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>< ...
【响应式Web前端设计】H5原生表单验证
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...

web前端必学功法之一：表单校验（1）

web前端必学功法之一：表单校验

web前端必学功法之一：表单校验（1）相关推荐

最新文章

热门文章