常说学习在于积累,在此之前我写过一篇博客<<常用Javascript数据验证(一)>>,时过半年,随着项目经验的不断增多,慢慢的有积累了相关的javascript数据验证的一些内容,今天就来和大家分享一下我的积累.
<script type="text/javascript">
//返回主界面
function goBack() {
window.self.location="user_maint.jsp"
}
//判断用户代码不能为空
function addUser() {
var userIdField = document.getElementById("userId");
//用户代码不能为空
if (trim(userIdField.value) == "" ) {
alert("用户代码不能为空!");
userIdField.focus();
return;
}
//用户代码至少四个字符
if (trim(userIdField.value).length < 4) {
alert("用户代码至少4个字符!");
userIdField.focus();
return;
}
//第一个字符必须是字母
if (!(trim(userIdField.value).charAt(0) >='a' && trim(userIdField.value).charAt(0) <='z')) {
alert("用户代码首字符必须为字母!");
userIdField.focus();
return;
}
//判断用户代码只能是数字或字母,为4~6位
/*
if (!(trim(userIdField.value).length >=4 && trim(userIdField.value).length <=6)) {
alert("用户代码只能为4~6位!!");
userIdField.focus();
return;
}
for (var i=0; i<trim(userIdField.value).length; i++) {
var c = trim(userIdField.value).charAt(i);
if (!((c >= '0' && c <='9') || (c >='a' && c <='z') || (c >='A' && c <='Z'))) {
alert("用户代码必须为数字和字母!");
userIdField.focus();
return;
}
}
*/
//采用正则表达式判断用户代码只能是数字或字母,为4~6位(中午作业)
var re = new RegExp(/^[a-zA-Z0-9]{4,6}$/);
if (!re.test(trim(userIdField.value))) {
alert("用户代码必须为数字或字母,只能为4~6位!");
userIdField.focus();
return;
}
//用户名称必须输入,不能和用户代码不能为空一致(中午作业)
if (trim(document.getElementById("userName").value).length == 0) {
alert("用户名称不能为空!");
document.getElementById("userName").focus();
return;
}
//密码至少6位(中午作业)
if (trim(document.getElementById("password").value).length < 6) {
alert("密码至少6位!");
document.getElementById("password").focus();
return;
}
//如果联系电话不为空,进行判断,判断规则:都为数字,采用两种方式:1、采用正则,2、不采用正则(中午作业)
var contactTelField = document.getElementById("contactTel");
//alert("a" + trim(contactTelField.value) + "a");
//不采用正则
/*
if (trim(contactTelField.value) != "") {
for (var i=0; i<trim(contactTelField.value).length; i++) {
var c = trim(contactTelField.value).charAt(i);
if (!(c >= '0' && c <= '9')) {
alert("电话号码不合法!");
contactTelField.focus();
return;
}
}
}
*/
if (trim(contactTelField.value) != "") {
//采用正则
re.compile(/^[0-9]*$/);
if (!re.test(trim(contactTelField.value))) {
alert("电话号码不合法!");
contactTelField.focus();
return;
}
}
//如果emial不能空,进行判断,判断规则:只要包含@即可,@最好不再最前面和最后面(中午作业)
var emailField = document.getElementById("email");
if (trim(emailField.value).length != 0) {
var emailValue = trim(emailField.value);
if ((emailValue.indexOf("@") == 0) || (emailValue.indexOf("@") == (emailValue.length - 1))) {
alert("email地址不正确!");
emailField.focus();
return;
}
if (emailValue.indexOf("@") < 0) {
alert("email地址不正确!");
emailField.focus();
return;
}
}
//失去焦点时判断用户代码是否存在
if(document.getElementById("spanUserId").innertHTML!=""){
alert("用户代码已经存在");
userIdField.focus();
return;
}
//等同上面的写法
with (document.getElementById("userForm")) {
action="user_add.jsp";
method="post";
submit();
}
}
//获得焦点
function init() {
document.getElementById("userId").focus();
}
//不能输入数字
function userIdOnKeyPress() {
//alert(window.event.keyCode);
if (!(event.keyCode >= 97 && event.keyCode <=122)) {
event.keyCode = 0;
}
}
function document.onkeydown() {
//alert(window.event.keyCode);
if (window.event.keyCode == 13 && window.event.srcElement.type != 'button') {
window.event.keyCode = 9;
}
}
//失去焦点的时候开始判断用户代码是否已经存在
function validate(field){
if (trim(field.value).length != 0) {
var xmlHttp;
//表示当前浏览器不是ie,如ns,firefox
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//添加时间戳处理缓存问题
var url = "user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime();
//设置请求方式为GET,设置请求的URL,设置为异步提交
xmlHttp.open("GET", url, true);
//将方法地址复制给onreadystatechange属性
//类似于电话号码
xmlHttp.onreadystatechange=function(){
//alert(xmlHttp.readyState);
//ajax引擎状态为成功
if (xmlHttp.readyState == 4) {
//HTTP协议状态为成功
if (xmlHttp.status == 200) {
if (trim(xmlHttp.responseText) != "") {
//alert(xmlHttp.responseText);
document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>"
}else {
document.getElementById("spanUserId").innerHTML = "";
}
}else {
alert("请求失败,错误码=" + xmlHttp.status);
}
}
};
//将设置信息发送到Ajax引擎
xmlHttp.send(null);
} else {
document.getElementById("spanUserId").innerHTML = "";
}
}
</script>
user_validate.jsp:
%
String userId=request.getParameter("userId");
if(UserManager.getInstance().findUserById(userId) !=null){
out.println("用户代码已经存在");
}
%>
注:
findUserById是一个通过用户ID查询用户表的方法.
总结:
这些javascript看着很简单,如果平常没有写过的,没有积累过,当有一天突然使用到的时候,头脑却是空白的,不知道如何写.为了防止这种情况出现,我们就从现在,最简单的开始积累.