免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
最近访问板块 发新帖
查看: 1733 | 回复: 4
打印 上一主题 下一主题

大家好,这样的注册效果应该如何实现!谢谢! [复制链接]

论坛徽章:
0
跳转到指定楼层
1 [收藏(0)] [报告]
发表于 2007-06-26 18:03 |只看该作者 |倒序浏览
大家好,这样的注册效果应该如何实现!谢谢!


这样的注册效果,如图

表但的JS验证部分用了FormValid0.3的代码,因为注册前要提交到数据库检测用户名和电子邮件是否存在,用了一个表单,里面包含两个<input type = "submit" name ="submit“>

然后使用

$action = $HTTP_POST_VARS["submit"];


switch ($action)
{
case "检测用户和邮件":
。。。。。

break;

case "注册":

。。。。
break;

分别用代码验证,我的问题是客户端js部分如何点击”检测用户和邮件“的时候值执行用户名和邮箱的js验证,而不像图中一样连密码部分的也执行了!


还有一个问题就是这样的验证方式有什么好的方法没有,我曾做过两个表单,表单一把邮箱和用户名传递到表单二,用
<input type = "submit" name ="submit1" value = "检测用户和邮件"
onClick="form02.username1.value=form01.username.value"|"form02.email1.value=form01.email.value"></td></tr>

但是我不会写onclick代码,不知道如何onclick传递两个值,上面一个代码中,只能传递username的值下来!谢谢!

php.jpg (25.75 KB, 下载次数: 20)

php.jpg

论坛徽章:
0
2 [报告]
发表于 2007-06-26 18:04 |只看该作者
<html>



<script language="JavaScript" type="text/javascript" src="FormValid.js"></script>

<script type="text/javascript">

FormValid.showError = function(errMsg,errName)

{
for (key in FormValid.allName) {
document.getElementById('errMsg_'+FormValid.allName[key]).innerHTML = '';
}
for (key in errMsg) {
document.getElementById('errMsg_'+errName[key]).innerHTML = errMsg[key];
}
}

</script>


<head>
<title>注册程序</title>
</head>


<body>



<form id="form1" name="form01" method="post" onsubmit="return validator(this)" action="swich.php" >

<p>
user_name用户名:<br />
<input type="text" name="username" size="20" maxlength="40" valid="required" errmsg="用户名不能为空!" />
<span id="errMsg_username" style="color:#FF0000"></span>
</p>

<p>
email地址:<br />
<input name="email" type="text" id="Email" valid="required|isEmail" errmsg="Email不能为空|Email格式不对!" />
<span id="errMsg_Email" style="color:#FF0000"></span>
</p>


<tr><td colspan = "2" align = "center">

<input type = "submit" name ="submit" value = "检测用户和邮件" /></td></tr>

<div id="errorMsg" style="width:400px; color:#FF0000" align="center"> </div>

</body>

</html>


<p>
密码:<br />
<input name="pswd" type="password" id="pswd" valid="required" errmsg="密码不能为空!" />
<span id="errMsg_pswd" style="color:#FF0000"></span>
</p>

<p>
确认密码:<br />
<input name="pswdagain" type="password" id="pswdagain" valid="eqaul" eqaulName="pswd" errmsg="两次密码不同!" />
<span id="errMsg_pswdagain" style="color:#FF0000"></span>
</p>



<p>
<table>
请输入验证码:<br />
<input type=text name=authinput style="width: 80px"><br>
<input type=hidden name=authnum value=<? echo $authnum; ?>>
<a href="zhuce.html" title="点击更新验证数字"><img src="img.php" border="0" align="absmiddle" ></a> <br>
</table>

</p>


<tr><td colspan = "2" align = "center">

<b><input type = "submit" name ="submit" value = "注册"></td></tr> </b>
</form>

<div id="errorMsg" style="width:400px; color:#FF0000" align="center"> </div>

</body>

</html>


表单程序,谁能帮我改以下,点检查邮箱和用户名的时候密码的关联验证先不显示!谢谢!

论坛徽章:
0
3 [报告]
发表于 2007-06-26 18:05 |只看该作者
var FormValid = function(frm) {
this.frm = frm;
this.errMsg = new Array();
this.errName = new Array();



this.required = function(inputObj) {
if (typeof(inputObj) == "undefined" || inputObj.value.trim() == "") {
return false;
}
return true;
}


this.eqaul = function(inputObj, formElements) {
var fstObj = inputObj;
var sndObj = formElements[inputObj.getAttribute('eqaulName')];

if (fstObj != null && sndObj != null) {
if (fstObj.value != sndObj.value) {
return false;
}
}
return true;
}

this.gt = function(inputObj, formElements) {
var fstObj = inputObj;
var sndObj = formElements[inputObj.getAttribute('eqaulName')];

if (fstObj != null && sndObj != null && fstObj.value.trim()!='' && sndObj.value.trim()!='') {
if (fstObj.value <= sndObj.value) {
return false;
}
}
return true;
}

this.compare = function(inputObj, formElements) {
var fstObj = inputObj;
var sndObj = formElements[inputObj.getAttribute('objectName')];
if (fstObj != null && sndObj != null && fstObj.value.trim()!='' && sndObj.value.trim()!='') {
if (!eval('fstObj.value' + inputObj.getAttribute('operate') + 'sndObj.value')) {
return false;
}
}
return true;
}

this.limit = function (inputObj) {
var len = inputObj.value.length;
if (len) {
var minv = inputObj.getAttribute('min');
var maxv = inputObj.getAttribute('max');
minv = minv || 0;
maxv = maxv || Number.MAX_VALUE;
return minv <= len && len <= maxv;
}
return true;
}

this.range = function (inputObj) {
var val = parseInt(inputObj.value);
if (inputObj.value) {
var minv = inputObj.getAttribute('min');
var maxv = inputObj.getAttribute('max');
minv = minv || 0;
maxv = maxv || Number.MAX_VALUE;

return minv <= val && val <= maxv;
}
return true;
}

this.requireChecked = function (inputObj) {
var minv = inputObj.getAttribute('min');
var maxv = inputObj.getAttribute('max');
minv = minv || 1;
maxv = maxv || Number.MAX_VALUE;

var checked = 0;
var groups = document.getElementsByName(inputObj.name);

for(var i=0;i<groups.length;i++) {
if(groups[i].checked) checked++;

}
return minv <= checked && checked <= maxv;
}

this.filter = function (inputObj) {
var value = inputObj.value;
var allow = inputObj.getAttribute('allow');
if (value.trim()) {
return new RegExp("^.+\.(?=EXT)(EXT)$".replace(/EXT/g, allow.split(/\s*,\s*/).join("|")), "gi").test(value);
}
return true;
}

this.isNo = function (inputObj) {
var value = inputObj.value;
var noValue = inputObj.getAttribute('noValue');
return value!=noValue;
}
this.checkReg = function(inputObj, reg, msg) {
inputObj.value = inputObj.value.trim();

if (inputObj.value == '') {
return;
} else {
if (!reg.test(inputObj.value)) {
this.addErrorMsg(inputObj.name,msg);
}
}
}

this.passed = function() {
if (this.errMsg.length > 0) {
FormValid.showError(this.errMsg,this.errName);
frt = document.getElementsByName(this.errName[0])[0];

if (frt.type!='radio' && frt.type!='checkbox') {
frt.focus();
}
return false;
} else {
return true;
}
}

this.addErrorMsg = function(name,str) {
this.errMsg.push(str);
this.errName.push(name);
}

this.addAllName = function(name) {
FormValid.allName.push(name);
}

}
FormValid.allName = new Array();
FormValid.showError = function(errMsg) {
var msg = "";
for (i = 0; i < errMsg.length; i++) {
msg += "- " + errMsg[i] + "\n";
}

alert(msg);
}
function validator(frm) {
var formElements = frm.elements;
var fv = new FormValid(frm);

for (var i=0; i<formElements.length;i++) {
var validType = formElements[i].getAttribute('valid');
var errorMsg = formElements[i].getAttribute('errmsg');
if (validType==null) continue;
fv.addAllName(formElements[i].name);

var vts = validType.split('|');
var ems = errorMsg.split('|');
for (var j=0; j<vts.length; j++) {
var curValidType = vts[j];
var curErrorMsg = ems[j];

switch (curValidType) {
case 'isNumber':
case 'isEmail':
case 'isPhone':
case 'isMobile':
case 'isIdCard':
case 'isMoney':
case 'isZip':
case 'isQQ':
case 'isInt':
case 'isEnglish':
case 'isChinese':
case 'isUrl':
case 'isDate':
case 'isTime':
fv.checkReg(formElements[i],RegExps[curValidType],curErrorMsg);
break;
case 'regexp':
fv.checkReg(formElements[i],new RegExp(formElements[i].getAttribute('regexp'),"g"),curErrorMsg);
break;
case 'custom':
if (!eval(formElements[i].getAttribute('custom')+'(formElements[i],formElements)')) {
fv.addErrorMsg(formElements[i].name,curErrorMsg);
}
break;
default :
if (!eval('fv.'+curValidType+'(formElements[i],formElements)')) {
fv.addErrorMsg(formElements[i].name,curErrorMsg);
}
break;
}
}
}
return fv.passed();
}
String.prototype.trim = function() {
return this.replace(/^\s*|\s*$/g, "");
}
var RegExps = function(){};
RegExps.isNumber = /^[-\+]?\d+(\.\d+)?$/;
RegExps.isEmail = /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)/;
RegExps.isPhone = /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/;
RegExps.isMobile = /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/;
RegExps.isIdCard = /(^\d{15}$)|(^\d{17}[0-9Xx]$)/;
RegExps.isMoney = /^\d+(\.\d+)?$/;
RegExps.isZip = /^[1-9]\d{5}$/;
RegExps.isQQ = /^[1-9]\d{4,10}$/;
RegExps.isInt = /^[-\+]?\d+$/;
RegExps.isEnglish = /^[A-Za-z]+$/;
RegExps.isChinese = /^[\u0391-\uFFE5]+$/;
RegExps.isUrl = /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;
RegExps.isDate = /^\d{4}-\d{1,2}-\d{1,2}$/;
RegExps.isTime = /^\d{4}-\d{1,2}-\d{1,2}\s\d{1,2}:\d{1,2}:\d{1,2}$/;


js的代码!

论坛徽章:
0
4 [报告]
发表于 2007-06-26 21:12 |只看该作者
AJAX 失去焦点触发

论坛徽章:
0
5 [报告]
发表于 2007-06-26 23:09 |只看该作者
不太懂ajax,能不能提供一些代码?谢谢!js能够实现吗?
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-6 北京市公安局海淀分局网监中心备案编号:11010802020122 niuxiaotong@pcpop.com 17352615567
未成年举报专区
中国互联网协会会员  联系我们:huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP