// 练习,一个form,用于注册,其中有用户名,密码,密码确认,要求:
// 检验用户名,不能包括以下字符: 分号,逗号,$符号,/符合,\符号,位数应该至少8位,但是不得超过18位
// 检验密码, 密码至少6位,密码中至少要包含一个数字,一个字母和一个符号(!@#$%^&*()_=+`~)
// 密码确认必须和密码一致.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="" method="post" align= "center" id="form1">
<label for="jujiao">用户名称:</label><input type="text" name="jujiao" id="jujiao" value=""/>
<span id="sp">尚未发现异常</span>
<br>
<label for="jujiao2">输入密码:</label><input type="text" name="" id="jujiao2" value=""/>
<span id="sp1">尚未发现异常</span>
<br>
<label for="jujiao3">密码确认:</label><input type="text" name="" id="jujiao3" value="" />
<span id="sp2">尚未发现异常</span>
<br>
<input type="submit" value="提交"/>
</form>
<script type="text/javascript">
var j = document.querySelector('#form1>#jujiao');
var sp = document.querySelector('#form1>#sp');
var j2 = document.querySelector('#form1>#jujiao2');
var sp1 = document.querySelector('#form1>#sp1');
var j3 = document.querySelector('#form1>#jujiao3');
var sp2 = document.querySelector('#form1>#sp2');
// var
j.value = '请输入你要输入的内容';
j2.value = '请输入你要输入的密码';
j3.value = '请再次输入密码';
j.onblur = function(){
if(j.value === ';' ){
// sp.innerText = '您输入的内容有错误';
sp.innerHTML = '<span>您输入的用户名不能有' ; '</span>';
sp.style.color = 'red';
}
if(j.value === ','){
sp.innerHTML = '<span>您输入的用户名不能有' , '</span>';
sp.style.color = 'red';
}
if(j.value === '$'){
sp.innerHTML = '<span>您输入的用户名不能有' $ '</span>';
sp.style.color = 'red';
}
if(j.value === '/'){
sp.innerHTML = '<span>您输入的用户名不能有' / '</span>';
sp.style.color = 'red';
}
if(j.value === '\\'){
sp.innerHTML = '<span>您输入的用户名不能有' \\ '</span>';
//Javascript中反斜杠输入两次代表一个反斜杠
sp.style.color = 'red';
}
if(j.value.length <= 8){
// sp.innerHTML = '<span>您输入的用户名不能有' $ '</span>';
sp.innerHTML = '<span>您输入的用户名称至少得8位哦!<span>';
sp.style.color = 'red';
}
if(j.value.length > 18){
// sp.innerHTML = '<span>您输入的用户名不能有' $ '</span>';
sp.innerHTML = '您输入的用户名称不得超过18位哦!';
sp.style.color = 'red';
}
}
j.onfocus = function(){
sp.innerHTML = '';
}
j2.onblur = function(){
if(j2.value.length <= 6){
sp1.innerHTML = '<span>您输入的密码不能小于6位哦</span>';
sp1.style.color = 'red';
}
// if(j2.value.indexOf('!,@,#,$,%,^,&,*,(,),_,=,+,`,~,)') === false ){
// //sp1.innerText = '您输入的符号必需有以下符号之一:!,@,#,$,%,^,&,*,(,),_,=,+,`,~,)';
// sp1.innerHTML = '您输入的符号必需有以下符号之一:!,@,#,$,%,^,&,*,(,),_,=,+,`,~,)';
// sp1.style.color = 'red';
// }
// if(j2.value.indexOf())
for(var i= 0; i < j2.value.length ; i++){
// var s = (j2.value[i] =='!' || j2.value[i] =='#' || j2.value[i] == '@' || j2.value[i] == '$'
// || j2.value[i] == '%' || j2.value[i] == '^' || j2.value[i] =='*' || j2.value[i] == '('
// || j2.value[i] == ')' || j2.value[i] == '_' || j2.value[i] == '=' || j2.value[i] == '+'
// || j2.value[i] == '~' || j2.value[i] == '`');
// if(j2.value[i] =='!' || j2.value[i] =='#' || j2.value[i] == '@' || j2.value[i] == '$'
// || j2.value[i] == '%' || j2.value[i] == '^' || j2.value[i] =='*' || j2.value[i] == '('
// || j2.value[i] == ')' || j2.value[i] == '_' || j2.value[i] == '=' || j2.value[i] == '+'
// || j2.value[i] == '~' || j2.value[i] == '`'
// ){
// sp1.innerHTML = '<span>您输入的密码正确</span>';
// }else{
// sp1.innerHTML = '<span>您输入的密码至少得有一位特殊字符</span>';
// }
// if(!isNaN(j2.value[i]) ){
// sp1.innerHTML = '<span>您输入的密码正确</span>';
// }else{
// sp1.innerHTML = '<span>您输入的密码至少有一位数字</span>';
// }
// var s =
if(
// j2.value.match(".*[a-z]+.*") && (!isNaN(j2.value[i]) )&& s
j2.value.match("^(?:(?=.*[0-9].*)(?=.*[A-Za-z].*)(?=.*[\\W].*))[\\W0-9A-Za-z]{8,16}$")
) {
sp1.innerHTML = '<span>您输入的密码正确</span>';
}else{
sp1.innerHTML = '<span>您输入的密码至少有一位是字母,数字 特殊字符</span>';
}
// console.log(
}
}
j2.onfocus = function(){
sp1.innerHTML = '';
}
j3.onblur = function(){
if(j2.value == j3.value){
sp2.innerText = '确认密码正确';
}else{
sp2.innerText = '您输入的密码有误';
}
}
// var a = 1;
// console.log(typeof(a));
</script>
</body>
</html>
如果需要htm的样式需要自己修改以及提示