js实现综合验证表单及表单验证提交

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

</style>

</head>

<body>

<tr>

<td colspan="2" align="center">用户名注册</td>

</tr>

<tr>

</tr>

<tr>

<td><input type="radio" name="sex" id="sexnan" checked>男

<input type="radio" name="sex" id="sexnv">女

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

<input type="checkbox" name="zuqiu" id="zuqiu">足球

<input type="checkbox" name="lanqiu" id="lanqiu" checked>篮球

<input type="checkbox" name="paiqiu" id="paiqiu">排球

<input type="checkbox" name="wangqiu" id="wangqiu">网球

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>

//名字验证:单词字符组成 6-10位，不能用数字开头

var flagename = false;

var oname = document.querySelector("#name");

oname.onblur = function () {

var reg = /^[a-zA-Z]{6,10}$/;

var ospan = oname.nextElementSibling;

if (reg.test(oname.value)) {

ospan.innerHTML = "输入正确";

ospan.style.color = "green";

flagename = true;

} else {

ospan.innerHTML = "请输入6-10位单词字符";

ospan.style.color = "red";

flagename = false;

}

//年龄：只能由数字组成年龄不能为负数

var flageage = false;

var oage = document.querySelector("#age");

oage.onblur = function () {

var reg = /^[1-9][0-9]?$/;

var ospan = oage.nextElementSibling;

if (reg.test(oage.value)) {

ospan.innerHTML = "输入正确";

ospan.style.color = "green";

flageage = true;

} else {

ospan.innerHTML = "输入数字，不能为负数";

ospan.style.color = "red";

flageage = false;

}

//密码：6-18位字符组成有密码强弱验证

var flagepsd1 = false;

var opsd1 = document.querySelector("#psd1");

opsd1.onblur = function () {

var ospan = opsd1.nextElementSibling;

var nreg = /^d{6,18}$/; //只有数字

var zreg = /^[a-zA-Z]{6,18}$/;//只有字母

var treg = /^[！@#￥%&*-]{6,18}$/;//只有特殊字符

var _nreg = /d{6,18}/; //包含数字

var _zreg = /[a-zA-Z]{6,18}/;//包含字母

var _treg = /[！@#￥%&*-]{6,18}/;//包含特殊字符

console.log((opsd1.value).length)

if ((opsd1.value).length > 5 && (opsd1.value).length < 19) {//先判断密码长度，再进入强弱分支

if (nreg.test(opsd1.value) || zreg.test(opsd1.value) || nreg.test(opsd1.value)) {

ospan.innerHTML = "弱";

ospan.style.color = "red";

flagepsd1 = true;

} else if (_nreg.test(opsd1.value) && _zreg.test(opsd1.value) && _treg.test(opsd1.value)) {

ospan.innerHTML = "强";

ospan.style.color = "green";

flagepsd1 = true;

} else {

ospan.innerHTML = "中";

ospan.style.color = "yellow";

flagepsd1 = true;

}

} else {

ospan.innerHTML = "请输入长度6-18位的密码";

ospan.style.color = "red";

flagepsd1 = false;

}

//3、确认密码和密码相同

var flagepsd2 = false;

var opsd2 = document.querySelector("#psd2");

var ospan = opsd2.nextElementSibling;

opsd2.onblur = function () {

if (opsd2.value == opsd1.value) {

ospan.innerHTML = "输入正确";

ospan.style.color = "green";

flagepsd2 = true;

} else {

ospan.innerHTML = "密码不符";

ospan.style.color = "red";

flagepsd2 = false;

}

//4、手机号： 15 13 18 开头

var flagtel = false;

var otel = document.querySelector("#tel");

var ospan = otel.nextElementSibling;

otel.onblur = function () {

var reg = /^1[5|3|8]{1}d{9}$/;

if (reg.test(otel.value)) {

ospan.innerHTML = "输入正确";

ospan.style.color = "green";

flagtel = true;

} else {

ospan.innerHTML = "请输入13,15,18开头的11位号码";

ospan.style.color = "red";

flagtel = false;

}

//5、qq ： 5-12位数字第一位不能是0

var flagqq = false;

var oqq = document.querySelector("#qq");

oqq.onblur = function () {

var reg = /^[1|2|3|4|5|6|7|8|9]d{4,11}$/;

var ospan = oqq.nextElementSibling;

if (reg.test(oqq.value)) {

ospan.innerHTML = "输入正确";

ospan.style.color = "green";

flagqq = true;

} else {

ospan.innerHTML = "q请输入5-12位，首字母不为0的qq号";

ospan.style.color = "red";

flagqq = false;

}

//6、邮箱：必须有@符号

var flagemail = false;

var oemail = document.querySelector("#email");

oemail.onblur = function () {

var reg = /^w+@(qq|163).com$/;

var ospan = oemail.nextElementSibling;

if (reg.test(oemail.value)) {

ospan.innerHTML = "输入正确";

ospan.style.color = "green";

flagemail = true;

} else {

ospan.innerHTML = "请输入包含@邮箱号";

ospan.style.color = "red";

flagemail = false;

}

//7、邮编：6为数字

var flagpc = false;

var opc = document.querySelector("#pc");

opc.onblur = function () {

var reg = /^d{6}$/;

var ospan = opc.nextElementSibling;

if (reg.test(opc.value)) {

ospan.innerHTML = "输入正确";

ospan.style.color = "green";

flagpc = true;

} else {

ospan.innerHTML = "请输入6位数字的邮编";

ospan.style.color = "red";

flagpc = false;

}

//8、身份证： 18位最后一位考虑有x

var flagid = false;

var oid = document.querySelector("#Id");

oid.onblur = function () {

var reg = /^d{17}(d|X)$/;

var ospan = oid.nextElementSibling;

if (reg.test(oid.value)) {

ospan.innerHTML = "输入正确";

ospan.style.color = "green";

flagid = true;

} else {

ospan.innerHTML = "18位身份证，最后一位可以有X";

ospan.style.color = "red";

flagid = false;

}

// 9、验证码

// 输入的验证码必须和红色框中的相同，点击看不清可以实现验证码的切换

// 验证码由字母数字组成

var flagoyzm = false;

//随机函数

function getRandom(min, max) {

if (min > max) {

var ls = min;

min = max;

max = ls;

}

return Math.floor(Math.random() * (max - min + 1)) + min;

}

//随机验证码

function randomYzm() {

var str = "";

for (var i = 1; i <= 4; i++) {

var num1 = getRandom(0, 9);

var num2 = String.fromCharCode(getRandom(65, 90));

var num3 = String.fromCharCode(getRandom(97, 122));

str += num1 + num2 + num3

}

var str1 = ""

for (var j = 1; j <= 4; j++) {

str1 += str[j];

}

return str1;

}

var obtn = document.querySelector("#btn");

yzm.nextElementSibling.innerHTML = randomYzm();

obtn.onclick = function () {

yzm.nextElementSibling.innerHTML = randomYzm();

}

var oyzm = document.querySelector("#yzm");

oyzm.onblur = function () {

var otit = document.querySelector(".tit")

if (oyzm.value == oyzm.nextElementSibling.innerHTML) {

otit.innerHTML = "输入正确";

otit.style.color = "green";

flagoyzm = true;

} else {

otit.innerHTML = "请重新输入";

otit.style.color = "red";

flagoyzm = false;

}

//判断提交

var or = document.querySelector("#r")

or.onsubmit = function () {

if (flagename && flageage && flagepsd1 && flagepsd2 && flagtel && flagqq && flagemail && flagpc && flagid && flagoyzm) {

return true;

}

return false;

}

</script>