代码如下~
内有详细解释,最后有照片!
& lt; html>
& lt;脚本type=" text/javascript祝辞
函数接下来(){
username_mess.style.visibility=翱杉?
}
函数outUser () {//获取名字为usesrname的文本
u=f1.username.value;
f1.username.style。边境=" 1 px固体AAAAAA”;
如果(u==" ") {
username_mess.style.visibility=耙亍?
返回;
}//正则表达式
reg=/4, 20}/;
如果(! reg.test (u)) {
username_mess.innerHTML="用户名长度只能在4位字符之间”;
username_mess.style.color=昂焐?
f1.username.style.color=昂焐?
f1.username.style。边境=" 1 px固体红”;
username_ok.style.visibility=耙亍?
返回;
}
reg=/^ [\ u4e00 - \ u9fa5 \ w] {20} 4 $/;
如果(reg.test (u)) {
username_ok.style.visibility=翱杉?
username_mess.innerHTML=" ";
f1.username.style.color=昂谏?
其他}{
username_mess.innerHTML="用户名只能由中文,英文,数字及“_”、“-”组成”;
username_mess.style.color=昂焐?
f1.username.style.color=昂焐?
f1.username.style。边境=" 1 px固体红”;
username_ok.style.visibility=耙亍?
}
}
函数inMail () {
mail_mess.style.visibility=翱杉?
}
函数outMail () {
v=f1.mail.value;
f1.mail.style。边境=" 1 px固体AAAAAA”;
如果(v==" ") {
mail_mess.style.visibility=耙亍?
返回;
}
reg=/\ w + ([- +。] \ w +) * @ \ w + ([-] \ w +) * \ \ w + ([-] \ w +) */;
如果(reg.test (v)) {
mail_ok.style.visibility=翱杉?
mail_mess.innerHTML=" ";
f1.mail.style.color=昂谏?
其他}{//更改id mail_mess的文字
mail_mess.innerHTML="请输入正确的邮箱地址,例如:X@X.X”;//设置id mail_mess字体的颜色
mail_mess.style.color=昂焐?//设置id为f1里的名字为邮件文本框内的文字颜色
f1.mail.style.color=昂焐?//设置文本框颜色以及框的大小
f1.mail.style。边境=" 1 px固体红”;
mail_ok.style.visibility=耙亍?
}
}
& lt;/script>
& lt; !
以下为类标签的应用函数+ + +
——比;
& lt;风格类型=" text/css "比;
.label {
位置:绝对的;
右:70%;
}
.fi {
位置:相对;
左:30%;
}
.clr {
高度:20 px;
颜色:AAAAAA;
字体大小:12 px;
可见性:隐藏;
}
授予了{
粗细:轻;
颜色:红色;
}
。text {
字体类型:宋体;
宽度:200 px;
}
.v {
颜色:cccccc;
字体大小:12 px;
}
一个{
字体大小:12 px;
}
.btn-img {
位置:相对;
左:30%;
}
对吧{
背景图片:url (“ok.jpg”);
宽度:17 px;
高:16 px;
可见性:隐藏;
}
& lt;/style>
& lt; body>
id=癴1”比& lt;形式;
& lt; div类="标签"祝辞& lt; b类=皊”在1 * & lt;/b>用户名:& lt;/div>
& lt; div类=" fi "比;
& lt;输入类型=拔谋尽钡拿?=拔谋尽薄坝没崩鄑abindex=" 1 "/祝辞& lt;标签id=皍sername_ok”class=皁k”祝辞& lt; img src=" https://www.yisu.com/zixun/ok.jpg "宽度=17 px高度=16 px/祝辞& lt;/label>
& lt; br/祝辞& lt; div id=皍sername_mess”class=癱lr”在4位字符,可由中文,英文,数字及“_”、“-”组成& lt;/div>
& lt;/div>
& lt; div类="标签"祝辞& lt; b类=皊”祝辞* & lt;/b>设置密码:& lt;/div>
& lt; div类=" fi "比;
& lt;输入类型="密码" name=" pwd "类=拔谋尽眛abindex=" 2 "/比;
,,,,,,
& lt;输入类型=案囱】颉眓ame=" visi " id=" viewpwd "/比;
& lt;标签类=" v "祝辞显示密码字符& lt;/label> & lt; br/比;
& lt; div类=" clr "祝辞& lt;/div>
& lt;/div>
& lt; div类="标签"祝辞& lt; b类=皊”祝辞* & lt;/b>确认密码:& lt;/div>
& lt; div类=" fi "比;
& lt;输入类型="密码" name==拔谋尽薄皃wd2”类tabindex=3/比;
& lt; br/祝辞& lt; div类=癱lr祝辞& lt;/div>
& lt;/div>
& lt; div类="标签"祝辞& lt; b类=皊”祝辞* & lt;/b>邮箱:& lt;/div>
& lt; div类=" fi "比;
& lt;输入类型=拔谋尽钡拿?=拔谋尽薄坝始崩鄑abindex=4/比;
& lt;标签id=癿ail_ok”class=皁k”祝辞& lt; img src=" https://www.yisu.com/zixun/ok.jpg "宽度=17 px高度=16 px/祝辞& lt;/label>
,,,,,,
& lt;标签类=" v "祝辞免费邮箱:& lt;/label>
& lt; a href="祝辞搜狐& lt;/a>
& lt; a href="祝辞网易& lt;/a> & lt; br/比;
& lt; div id=癿ail_mess”class=癱lr”祝辞请输入正确的邮箱地址& lt;/div>
& lt;/div>
& lt; div类="标签"祝辞推荐人用户名:& lt;/div>
& lt; div类=" fi "比;
& lt;输入类型=拔谋尽钡拿?=拔谋尽薄皉eferrer”类
值=" https://www.yisu.com/zixun/可不填“tabindex=" 5 "/比;
& lt; br/比;
& lt; div类=" clr "祝辞& lt;/div>
& lt;/div>
& lt;输入类型=鞍磁ァ崩?" btn-img " id=皉egistsubmit”
值=" https://www.yisu.com/zixun/同意以下协议,提交“tabindex=" 8 "/比;
& lt;/form>
& lt;/body>
& lt;/html>
