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

这里采用另一种写法，jQuery写法，在用jQuery写法之前，一定要引入jquery.js.

    <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>

    <script>$("#submitBtn").click(function(){// 验证姓名// 1)不能为空 2)长度为6-12位var userName = $("#userName").val();// 1)不能为空 if(isEmpty(userName)){$("#msg").html("姓名不能为空");return;}// 2)长度为6-12位if(userName.length < 6 || userName.length > 12 ){$("#msg").html("姓名长度在6-12位之间");return;}// 验证密码// 1)不能为空 2)长度为6-12位 3)不能包含姓名var  userPwd = $("#userPwd").val();// 1)不能为空 if(isEmpty(userPwd)){$("#msg").html("密码不能为空");return;}// 2)长度为6-12位if(userPwd.length < 6 || userPwd.length > 12 ){$("#msg").html("密码长度在6-12位之间");return;}// 3)不能包含姓名if(userPwd.indexOf(userName) != -1){$("#msg").html("密码中不能包含姓名");return;}// 验证年龄//  1)不能为空 2)范围在1-100之间var  userAge = $("#userAge").val();//  1)不能为空if(isEmpty(userAge)){$("#msg").html("年龄不能为空");return;}// 2)范围在1-100之间if(userAge < 1 || userAge > 100){$("#msg").html("年龄范围在1-100之间");return;}// 验证性别//   必须选择一项//获取被选中的单选框的值var userSex = $("[name = 'userSex']:checked").val();//  1)不能为空if(isEmpty(userSex)){$("#msg").html("请选择性别!");return;}// 验证爱好//   必须选择一项//获取爱好被选中的复选框var  hobbys = $("[name='userHobby']:checked");//判断是否选中(长度大于0);if(hobbys.length == 0){$("#msg").html("请选择爱好！");return;}var userHobby = "";//遍历得到选中的复选框的值for(var i = 0;i<hobbys.length;i++){userHobby += hobbys[i].value + ",";  //jquery对象取下标就变成了dom对象}//截取字符串，去除最后多余的",";userHobby  = userHobby.substring(0,userHobby.length - 1);// 验证城市//   必须选择一项var userCity = $("#userCity").val();//  1)不能为空if(isEmpty(userCity)){$("#msg").html("请选择城市!");return;}//清空提示信息$("#msg").html("");//获取简介var userRemark = $("#userRemark").val();//弹出所有内容var str = "姓名:" + userName + "\n密码:" + userPwd + "\n";str +="年龄:" + userAge  + "\n性别:" +  userSex + "\n";str +="爱好:" + userHobby + "\n城市:" +  userCity +"\n";str +="简介:" + userRemark;alert(str);//提交表单$("#myform").submit();});// 判断字符串是否为空// 如果为空,返回true,// 如果不为空,返回false// trim()：去除字符串前后空格function isEmpty(str){if(str == null || str.trim() ==""){return true;}return false;}</script>

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

web前端必学功法之一：表单校验（1）
web前端必学功法之一:表单校验案例效果: 这里的布局采用的是bootstrap布局 <div class="container" style="margin-t ...
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前端必学功法之一：表单校验（2）

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

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

最新文章

热门文章