html课题研究学习日记#36

编写js小功能：表单格式验证

在联系方式页面使用js实现表单验证功能

1：验证用户名是否合法

2：验证邮箱是否合法

3：验证手机号是否合法

function shoeTips(spanId, tips) {

 var span = document.getElementById(spanId);

 span.innerHTML = tips;

}

/**

 * 校验用户名

 */

function hint() {

 var value = document.getElementById("value").value;

 var hint = document.getElementById("hint");

 if(value.length < 6) {

  hint.innerHTML = "用户名太短";

  return false;

 } else {

  hint.innerHTML = "用户名合格";

  return true;

 }

}

function hint_hide() {

 var hint = document.getElementById("hint");

 hint.innerHTML = "";

}

/**

 * 校验邮箱

 */

function checkEmail(strEmail)

{     

    var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;

    if ( emailReg.test(strEmail) ) {

        return true;

    }

    else {

//      alert("您输入的Email地址格式不正确！");

        return false;

    }

};

function emailCheck() {

 var emailValue = document.getElementById("email").value;

 var email_hint = document.getElementById("email_hint");

 var flag = checkEmail(emailValue);

 if(flag) {

  email_hint.innerHTML = "邮箱格式正确";

  return true;

 } else {

  email_hint.innerHTML = "邮箱格式错误";

  return false;

 }

}

function emailHide() {

 var email_hint = document.getElementById("email_hint");

 email_hint.innerHTML = "";

}

/**

 * 校验手机号

 */

function checkMobile( strMobile )

{ //13588888888

    var regu = /^[1][345678][0-9]{9}$/;

    var re = new RegExp(regu);

    if (re.test(strMobile)) {

        return true;

    }

    else {

        return false;

    }

};

function phoneCheck() {

 var phone = document.getElementById("phone").value;

 var phone_hint = document.getElementById("phone_hint");

 var flag = checkMobile(phone);

 if(flag) {

  phone_hint.innerHTML = "手机号格式正确";

  return true;

 } else {

  phone_hint.innerHTML = "手机号格式错误";

  return false;

 }

}

function phoneHide() {

 var phone_hint = document.getElementById("phone_hint");

 phone_hint.innerHTML = "";

}

function checkForm() {

 var flag = emailCheck() && checkPass() && checkPassPass() && hint() && phoneCheck();

 return flag;

}

本日学习时间3小时