您的位置：首页 > 其它

表单

2015-07-22 00:00 232 查看

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>

<style>
span{
font-size: 12px;
}
.stats1{
color: #aaaaaa;
}
.stats2{
color: #000;
}
.stats3{
color: red;
}
.stats4{
color: green;
}
</style>

<script src="js/check.js"></script>

</head>
<body>
<form action="reg.php" method="post" onsubmit="return regs('click')">
username：<input type="text" name="username" value="">
<span class="stats1">请输入用户名</span><br>
password：<input type="password" name="password" value="">
<span class="stats1">请输入用户密码</span><br>
rePass：  <input type="password" name="rePass" value="">
<span class="stats1">请输入用户确认密码</span><br>
email：   <input type="text" name="email" value="">
<span class="stats1">请输入邮箱</span><br>
other：   <input type="text" name="other" value="">
<span class="stats1">请输入其它</span><br>
submit：  <input type="submit" name="sub" value="submit"><br>
</form>
</body>
</html>

check.js

/**
* Created by Administrator on 2015/7/22.
*/
//获取下一个SPAN，可以通过这个对象给状态
function gspan(cobj) {
while (true) {
if (cobj.nextSibling.nodeName != "SPAN") {
cobj = cobj.nextSibling;
}else {
return cobj.nextSibling;
}
}
}
/*
通用检查方法
第一个参数：obj，是用来检查的对象
第二个参数：info，用来检查的提示信息
第三个参数：fun，是一个回调函数，用来检查值是否按条件输入
第四个参数：click只是一个状态，分清楚是单击提交按扭，还是失去焦点
*/
function check(obj,info,fun,click){
var sp=gspan(obj);
//获取焦点
obj.onfocus=function(){

 
3ff0
;    sp.innerHTML=info;
sp.className="stats2";
}
//失去焦点
obj.onblur=function(){
if(fun(this.value)){
sp.innerHTML="输入正确";
sp.className="stats4";
}else{
sp.innerHTML=info;
sp.className="stats3";
}
}
if(click=="click"){
obj.onblur();
}
}

//页面加载完自动调用
onload=regs;

//一个函数，可以使用onsubmit调用，也可以使用onload调用
function regs(click){
var stat=true;
var username=document.getElementsByName("username")[0];
var password=document.getElementsByName("password")[0];
var rePass=document.getElementsByName("rePass")[0];
var email=document.getElementsByName("email")[0];
var other=document.getElementsByName("other")[0];

//alert(username.nextSibling.nodeName)
//alert(gspan(username).nodeName);
check(username,"用户名的长度要在3-20之间",function(val){
if(val.match(/^\S+$/) && val.length>=3 && val.length<=20){
return true;
}else{
stat=false;
return false;
}
},click);

check(password,"密码必须在6-20之间",function(val){
if(val.match(/^\S+$/) && val.length>=6 && val.length<=20){
return true;
}else{
stat=false;
return false;
}
},click);

check(rePass,"确认密码要和上面一致，规则也要相同",function(val){
if(val.match(/^\S+$/) && val.length>=6 && val.length<=20 && val==password.value){
return true;
}else{
stat=false;
return false;
}
},click);

check(email,"要按邮箱规则输入",function(val){
if(val.match(/\w+@\w+\.\w/)){
return true;
}else{
stat=false;
return false;
}
},click);

return stat;

}

大杂烩

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>

</head>
<body>
<form name="frm" action="login.php" onsubmit="return check()" method="post">
username:<input type="text" name="username" onblur="one()" value=""><br>
password:<input type="password" name="password" onblur="two()" value=""><br>
<input type="submit" name="submit2" value="Login"><br>
</form>
<h1 onclick="test()">login h1</h1>

<script>
function one(){
if(!document.frm.username.value.match(/^\s+$/)){
alert("用户名不能为空!");
//            document.frm.username.focus();
}
}
function two(){
if(!document.frm.password.value==""){
alert("密码不能为空!");
//            document.frm.password.focus();
}
}

function check(){
var info="";
var stats=true;
if(!document.frm.username.value.match(/^\s+$/)){
info+="用户名不能为空!\n";
//            document.frm.username.focus();
stats = false;
}
if(document.frm.password.value==""){
info+="密码不能为空!\n";
//            document.frm.password.focus();
stats=false;
}
if(!stats){
alert(info);
}
return stats;
}
//    function test(){
//        var frmobj=document.frm;
//        frmobj.action="index.php";
//        frmobj.target="_blank";
//        frmobj.method="get";
//        frmobj.username.value = "admin";
//        frmobj.submit();
//    }
//    setTimeout("test()",3000);
</script>
<!--<frameset rows="100,*">-->
<!--<frame name="top"/>-->
<!--<frameset cols="150,*">-->
<!--<frame name="menu" src="menu.html"/>-->
<!--<frame name="main"/>-->

<!--</frameset>-->
<!--</frameset>-->

<!--<script>-->
<!--with (document){-->
<!--write("您的屏幕显示设定值如下：<p>");-->
<!--write("屏幕的实际高度为：",screen.availHeight,"<br>");-->
<!--write("屏幕的实际宽度为：",screen.availWidth,"<br>");-->
<!--write("屏幕的色盘深度为：",screen.colorDepth,"<br>");-->
<!--write("屏幕区域的高度为：",screen.height,"<br>");-->
<!--write("屏幕区域的宽度为：",screen.width,"<br>");-->
<!--write("--------------------------------------------------------------")-->
<!--}-->
<!--</script>-->

<!--<div id="one">-->
<!--aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>-->
<!--aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>-->
<!--aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>-->
<!--aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>-->
<!--aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>-->
<!--aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>-->
<!--aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>-->
<!--aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>-->
<!--aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>-->
<!--</div>-->

<!--<input type="button" onclick="copyC()" value="copyCode">-->
<!--<script>-->
<!--var one=document.getElementById("one");-->
<!--function copyC(){-->
<!--var content=one.innerText;-->

<!--//剪切板-->
<!--window.clipboardData.setData("Text",content);-->
<!--}-->
<!--</script>-->
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航