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

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

```html

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

<span id="msg" style="color: red;"></span>

</div>

</div>

</form>

</div>

```

```javascript

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