如何制作表单
2个回答
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
body {
margin: 0 auto;
text-align: center;
}
hr {
height: 1px;
border: none;
/*加虚线*/
border-top: 1px dashed #000;
}
tr td:nth-child(1) {
/*第一个td向右对齐*/
text-align: right;
}
tr td:nth-child(2) {
/*第二个td向左对齐*/
text-align: left;
}
textarea {
/*显示右侧滚动条*/
overflow: scroll;
/*隐藏左右滚动条*/
overflow-x: hidden;
/*隐藏右下角的拖拽标记*/
resize: none;
}
#result {
margin: 10px;
color: green;
}
</style>
<script>
function register() {
/*获取用户所有输入*/
//通过id直接获取value值
var username = document.getElementById('username').value; //用户名
var password = document.getElementById('password').value; //密码
var confirmPassword = document.getElementById('confirmPassword').value; //确认密码
var idNumber = document.getElementById('idNumber').value; //身份证号
var signature = document.getElementById('signature').value; //个性签名
//通过id获取对象
var myclass = document.getElementById('myclass'); //班级
//通过name获取对象list
var sex = document.getElementsByName('sex'); //性别
var hobby = document.getElementsByName('hobby'); //爱好
//单选框---性别，复选框---爱好
sex = getRadioValue(sex);
hobby = getCheckboxValues(hobby);
//下拉框---班级
var index = myclass.selectedIndex; //选中的索引
myclass = myclass.options[index].value; //选中的value值
//myclass = myclass.options[index].text; //选中的文本值
/*验证*/
//验证用户名,未通过不往下执行
if(!checkUsername(username)) return;
//验证密码,未通过不往下执行
if(!checkPassword(password, confirmPassword)) return;
//验证身份证号
if(!IdentityCodeValid(idNumber)) return;
/*所有验证通过，显示*/
var result = document.getElementById('result');
result.innerHTML = '' +
'用户名：' + username + '<br/>' +
'密码：' + password + '<br/>' +
'身份证号：' + idNumber + '<br/>' +
'性别：' + sex + '<br/>' +
'爱好：' + hobby + '<br/>' +
'班级：' + myclass + '<br/>' +
'个性签名：' + signature;
}
//获取单选框值value值
var getRadioValue = function(radios) {
//遍历当前radio
for(var i = 0; i < radios.length; i++) {
if(radios[i].checked == true) {
return radios[i].value; //取value值
}
}
}
//获取复选框选中的值
var getCheckboxValues = function(checkboxs) {
check_val = [];
for(k in checkboxs) {
if(checkboxs[k].checked)
check_val.push(checkboxs[k].value);
}
return check_val;
}
//验证用户名
var checkUsername = function(username) {
if(username == '') {
alert("请输入用户名");
return false;
} else if(username.length < 6 || username.length > 12) {
alert("用户名长度为6-12位");
return false;
} else if(!regExpUsername(username)) {
alert("用户名由字母、数字和下划线组成!");
return false;
}
return true;
}
//判断只能输入字母、数字、下划线
function regExpUsername(username) {
//只能输入字母、数字、下划线
//必须以字母开头，且以字母、数字、下划线(_)随意组合的正则式为： ^[a-zA-Z]{1}\w*$
var reg = new RegExp(/^\w+$/);
if(!reg.test(username)) return false;
return true;
}
//验证密码
var checkPassword = function(password, confirmPassword) {
if(password == '') {
alert("请输入密码");
return false;
} else if(password.length < 6) {
alert("密码长度至少6位");
return false;
} else if(!regExpPassword(password)) {
alert("密码必须为数字和字母组合");
return false;
}
//开始判断确认密码
else if(confirmPassword == '') {
alert("请输入确认密码");
return false;
} else if(password != confirmPassword) {
alert("两次密码输入不一致");
return false;
}
return true;
}
//判断为数字和字母的组合
function regExpPassword(password) {
var re = /^(([a-z]+[0-9]+)|([0-9]+[a-z]+))[a-z0-9]*$/i;
if(!re.test(password)) return false;
return true;
}
//支持地址编码、出生日期、校验位验证
function IdentityCodeValid(code) {
var city = {
11: "北京",
12: "天津",
13: "河北",
14: "山西",
15: "内蒙古",
21: "辽宁",
22: "吉林",
23: "黑龙江 ",
31: "上海",
32: "江苏",
33: "浙江",
34: "安徽",
35: "福建",
36: "江西",
37: "山东",
41: "河南",
42: "湖北 ",
43: "湖南",
44: "广东",
45: "广西",
46: "海南",
50: "重庆",
51: "四川",
52: "贵州",
53: "云南",
54: "西藏 ",
61: "陕西",
62: "甘肃",
63: "青海",
64: "宁夏",
65: "新疆",
71: "台湾",
81: "香港",
82: "澳门",
91: "国外 "
};
var tip = "";
var pass = true;
if(!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(code)) {
tip = "身份证号格式错误";
pass = false;
} else if(!city[code.substr(0, 2)]) {
tip = "地址编码错误";
pass = false;
} else {
//18位身份证需要验证最后一位校验位
if(code.length == 18) {
code = code.split('');
//∑(ai×Wi)(mod 11)
//加权因子
var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
//校验位
var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2];
var sum = 0;
var ai = 0;
var wi = 0;
for(var i = 0; i < 17; i++) {
ai = code[i];
wi = factor[i];
sum += ai * wi;
}
var last = parity[sum % 11];
if(parity[sum % 11] != code[17]) {
tip = "校验位错误";
pass = false;
}
}
}
if(!pass) alert(tip);
return pass;
}
</script>
</head>
<body>
<h3>用户注册</h3>
<hr/>
<div>
<table align="center">
<tr>
<td>
用户名：
</td>
<td>
<input type="text" id="username" placeholder="--请输入用户名--" />
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="password" id="password" placeholder="--请输入密码--" />
</td>
</tr>
<tr>
<td>
重复输入密码：
</td>
<td>
<input type="password" id="confirmPassword" placeholder="--请重复输入密码--" />
</td>
</tr>
<tr>
<td>
身份证号：
</td>
<td>
<input type="text" id="idNumber" placeholder="--请输入身份证号--" />
</td>
</tr>
<tr>
<td>
性别：
</td>
<td>
<input type="radio" name="sex" checked="checked" value="男" />男
<input type="radio" name="sex" value="女" />女
</td>
</tr>
<tr>
<td>
爱好：
</td>
<td>
<input type="checkbox" name="hobby" value="体育" />体育
<input type="checkbox" name="hobby" value="音乐" />音乐
<input type="checkbox" name="hobby" value="文学" />文学
<input type="checkbox" name="hobby" value="其他" />其他
</td>
</tr>
<tr>
<td>
班级：
</td>
<td>
<select id="myclass">
<option value="软件1401">软件1401</option>
<option value="软件1402">软件1402</option>
<option value="软件1403" selected="selected">软件1403</option>
</select>
</td>
</tr>
<tr>
<td>
个性签名：
</td>
<td>
<textarea id="signature" rows="2"></textarea>
</td>
</tr>
<tr>
<td colspan="2">
</tr>
</table>
</div>
<div>
<button onclick="register()">注册</button>
</div>
<div id="result"></div>
</body>
</html>
来自：求助得到的回答
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
