101.使用 js 选择单选框复选框下拉框

阅读量：5878 次

发布时间：2019-06-19

本文共 8640 字，大约阅读时间需要 28 分钟。

1.效果

2.代码

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>bootstrap入门</title>

//2.校验账号是否被注册光标离开事件

$(function(){

$("#loginid").blur(function(){

var value = $("#loginid").val();

var reg = /[\u4e00-\u9fa5]/g;

if(reg.test(value)){

$("#checkRegisterid").html("<font style='color: red;'>账号不能有中文</font>");

$("#registerButton").attr("disabled", true);

}else{

if(value.length>15){

$("#checkRegisterid").html("<font style='color: red;'>账号不能大于15个长度！</font>");

$("#registerButton").attr("disabled", true);//让按钮失效

}else{

if(value.length<3){

$("#checkRegisterid").html("<font style='color: red;'>账号至少3个长度！</font>");

$("#registerButton").attr("disabled", true);

}else{

var url="${pageContext.request.contextPath }/registerAction.action";

var data="value="+value;

$.post(url,data,function(result){

var msg=result.msg;

if(msg.length > 0){

$("#checkRegisterid").html("<font style='color: red;'>该账号已经被注册</font>");

$("#registerButton").attr("disabled", true);

}else{

$("#checkRegisterid").html("<font style='color: red;'></font>");

$("#registerButton").attr("disabled", false);

}

},"json");

}

});

//3.用户名称长度限制

$(function(){

$("#username").blur(function(){

var val = $("#username").val();

if(val.length <1){

$("#checkRegisterusername").html("<font style='color: red;'>名称不能为空！</font>");

$("#registerButton").attr("disabled", true);

}else{

if(val.length>10){

$("#checkRegisterusername").html("<font style='color: red;'>称不能超过十个</font>");

$("#registerButton").attr("disabled", true);

}else{

$("#checkRegisterusername").html("<font style='color: red;'></font>");

$("#registerButton").attr("disabled", false);

}

});

//6.电话号码校验

$(function(){

$("#phonenumber").blur(function(){

var phoneNum =$("#phonenumber").val();

if(!(/^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/.test(phoneNum))){

$("#checkPhonenumber").html("<font style='color: red;'>手机号格式错误！</font>");

$("#registerButton").attr("disabled", true);

} else{

$("#registerButton").attr("disabled", false);

$("#checkPhonenumber").html("<font style='color: red;'></font>");

}

});

// 8.邮箱正则表达式

$(function(){

$("#email").blur(function(){

var email =$("#email").val();

var re=/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;

if(!(re.test(email))){

$("#checkEmail").html("<font style='color: red;'>邮箱格式错误！</font>");

$("#registerButton").attr("disabled", true);

} else{

$("#registerButton").attr("disabled", false);

$("#checkEmail").html("<font style='color: red;'></font>");

}

});

//9.身份证号码校验

$(function(){

$("#personcardnumber").blur(function(){

var personcardnumber =$("#personcardnumber").val();

var re=/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/;

if(!(re.test(personcardnumber))){

$("#checkPersoncardnumber").html("<font style='color: red;'>身份证格式错误！</font>");

$("#registerButton").attr("disabled", true);

} else{

$("#registerButton").attr("disabled", false);

$("#checkPersoncardnumber").html("<font style='color: red;'></font>");

}

});

//10.使用js 选择性别

$(function(){

var sex = ${updateUser.sex}

if(sex=='1'){

//$("#manSexId").checked=true;

document.getElementById("womanSexId").checked=true;

}else{

//$("#womanSexId").checked=true;

document.getElementById("manSexId").checked=true;

}

});

//11. js 选择爱好复选框

$(function(){

var hobbys = "${updateUser.hobby }"

if(hobbys.indexOf("1") != -1 ){

$('#hobbyId1').attr('checked', true)

}

if(hobbys.indexOf("2") != -1 ){

$('#hobbyId2').attr('checked', true)

}

if(hobbys.indexOf("3") != -1 ){

$('#hobbyId3').attr('checked', true)

}

});

// 12. select 工作年限回显

$(function(){

var workage = "${updateUser.workage }"

var selectWorkAge = document.getElementById("workage");

for(var i=0; i<selectWorkAge.options.length; i++){

if(selectWorkAge.options[i].value == workage){

selectWorkAge.options[i].selected = true;

break;

}

});

// 13. select 家庭地址

$(function(){

var workage = "${updateUser.address }"

var selectaddress = document.getElementById("address");

for(var i=0; i<selectaddress.options.length; i++){

if(selectaddress.options[i].value == workage){

selectaddress.options[i].selected = true;

break;

}

});

</script>

</head>

<body>

</div>

</div>

<label>

<input type="radio" name="sex" value="2" id="manSexId"/>男            

<input type="radio" name="sex" value="1" id="womanSexId"/>女

</label>

</div>

</div>

<label>

<input type="checkbox" name="hobby" value="1" id="hobbyId1"/>散步      

<input type="checkbox" name="hobby" value="2" id="hobbyId2"/>爬山      

<input type="checkbox" name="hobby" value="3" id="hobbyId3"/>读书      

</label>

</div>

</select>

</div>

</div>

<label class="col-sm-3 control-label">Email：</label>

</div>

<label class="col-sm-2 control-label">身份证号码：</label>

</div>

</select>

</div>

<textarea class="form-control" rows="3" name="other" >${updateUser.other }</textarea>

</div>

</div>

</form>

</body>

</html>

转载于:https://my.oschina.net/springMVCAndspring/blog/1790713

你可能感兴趣的文章

ORACLE---Unit04： SQL（高级查询）

查看>>

Entity Framework Code First 模式-建立多对多联系

查看>>

[LeetCode] Reverse Lists

查看>>

前台页面之<base>标签

查看>>

AtCoder Regular Contest 067

查看>>

学习Javascript的书籍（转）

查看>>

css知多少（11）——position（转）

查看>>

selenium工作的大概原理

查看>>

《WPF程序设计指南》读书笔记——第7章 Canvas

查看>>

建网站

查看>>

.NET Core使用swagger进行API接口文档管理

查看>>

Socket 一个服务器监听多个客户端功能实现

查看>>

代码评审的真相

查看>>

Python开发【第一篇】：目录（此文复制粘贴于武沛齐博客园）

查看>>

Cassandra LeveledCompaction在SSD上对写性能的影响

VirtualBox虚拟机网络设置（四种方式）

查看>>

TortoiseGit's Settings

查看>>

7.生产者消费者案例（使用Lock 同步锁方式，使用Condition完成线程之间的通信）...

查看>>