学生选课系统表单验证-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin-left:auto;
        margin-right:auto;
        max-width: 500px;
        background: #F8F8F8;
        padding: 10px;
        font: 12px Arial, Helvetica, sans-serif;
        color: #666;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
    }
    body,form{
        padding: 15px;
        background: #F4F4F4;
    }
    h2 {
         padding-bottom:2px;
         *padding:0;
         font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
         padding: 20px 0px 20px 40px;
         display: block;
         margin: -30px -30px 10px -30px;
         color: #FFF;
         background: #9DC45F;
         text-shadow: 1px 1px 1px #949494;
         border-radius: 5px 5px 0px 0px;
         -webkit-border-radius: 5px 5px 0px 0px;
         -moz-border-radius: 5px 5px 0px 0px;
         border-bottom:1px solid #89AF4C;
     }
    button {
        background-color: #9DC45F;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-border-radius: 5px;
        border:none;
        padding: 10px 25px 10px 25px;
        color: #FFF;
        text-shadow: 1px 1px 1px #949494;
    }
    button:hover {
        background-color:#80A24A;
    }
    button{
        margin-left: 100px;
        margin-top:30px;
    }
    #user,#password,#name,#num,#phone,#email{vertical-align:middle;}/*input和图片在一行*/
    #userPrompt,#passPrompt,#namePrompt,#numPrompt,#phonePrompt,#emailPrompt{
        vertical-align:middle;/*input和图片在一行*/
        display: inline-block;
        padding: 0px;
        color: red;
        background-color:#F4F4F4;
    }
    /*验证表单的格式*/
    /*当鼠标放到文本框时，提示文本的样式*/
    .import_prompt{
        border:solid 1px #ffcd00;
        background-color:#ffffda;
    }
</style>
<body>
<a href="#"></a>
<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain" onsubmit="return checkForm()">
    <h2>学生选课基本信息</h2>
    账号：<input type="text" id="user" placeholder="userName" onfocus="checkUserFocus()" onblur="checkUserBlur()">
    <div id="userPrompt"></div><br/>
    密码：<input type="password" id="password" placeholder="yourpass" onfocus="checkPassFocus()" onblur="checkPassBlur()">
    <div id="passPrompt"></div><br/>
    姓名：<input type="text" id="name" placeholder="yourname" size="20" onfocus="checkNameFocus()" onblur="checkNameBlur()">
    <div id="namePrompt"></div><br/>
    学号：<input type="text" id="num" placeholder="yournum" onfocus="checkNumFocus()" onblur="checkNumBlur()">
    <div id="numPrompt"></div><br/>
    手机：<input type="tel" id="phone" placeholder="yourphone" maxlength="11" onfocus="checkTelFocus()" onblur=" checkTelBlur()" onkeyup="checkTelUp()">
    <div id="phonePrompt"></div><br/>
    邮箱：<input type="email" id="email" placeholder="yourmail" onfocus="checkEmailFocus()" onblur="checkEmailBlur()">
    <div id="emailPrompt"></div>
    <br/>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
</form>

</body>
<script>
    function $(id){
        return document.getElementById(id);
    }
    // 当鼠标放在账号文本框时，提示文本样式。
    function checkUserFocus(){
        var userId = document.getElementById('user');
        userId.className = 'import_prompt';
        var userPrompt = document.getElementById('userPrompt');
        userPrompt.innerHTML = '由4-16位字母或数字组成，字母打头';
    }
    //当鼠标离开账号文本输入时，提示文本及样式
    function checkUserBlur(){
        var userId = document.getElementById('user');
        var userPrompt = document.getElementById('userPrompt');
        userPrompt.innerHTML = null;
        var reg = /^[a-zA-Z][a-zA-Z0-9]{3-15}/;
        var user = userId.value;
        //检查是否为空
        if(user === ''){
            userPrompt.innerHTML='账号不能为空';
            return false;
        }else if(!reg.test(user)){
            userPrompt.innerHTML = '账户输入非法';
            return false;
        }else{
            return true;
        }
    }
    //当鼠标放在密码文本框时，提示文本样式。
    function checkPassFocus(){
        var password = document.getElementById('password');
        password.className = 'import_prompt';
        var passPrompt = document.getElementById('passPrompt');
        passPrompt.innerHTML = '密码由英文字母和数字组成的4-10位字符';

    }
    //当鼠标离开密码文本框时，提示文本及样式。
    function checkPassBlur(){
        var password = document.getElementById('password');
        var passPrompt = document.getElementById('passPrompt');
        passPrompt.innerHTML = null;
        var reg = /^[a-zA-Z][a-zA-Z0-9]{3,9}/;
        var psw = password.value;
        if(psw === ''){
            passPrompt.innerHTML='密码不能为空';
            return false;
        }else if(!reg.test(psw)){
            passPrompt.innerHTML = '密码不符合要求';
            return false;
        }else{
            return true;
        }
    }
    // 当鼠标放在姓名文本框时，提示文本及样式。
    function checkNameFocus(){
        var userNameId= document.getElementById('name');
        userNameId.className = "import_prompt";
        var namePrompt= document.getElementById('namePrompt');
        namePrompt.innerHTML = "必须是汉字";
    }
    /*当鼠标离开姓名文本框时，提示文本及样式*/
    function checkNameBlur(){
        var namePrompt=document.getElementById('namePrompt');
        namePrompt.innerHTML=null;
        var reg=/^[\u4e00-\u9fa5]+$/;//匹配简体中文的正则表达式
        var name=document.getElementById('name').value;
        // 先查看是否为空
        if(name===""){
            namePrompt.innerHTML="名字不能为空！";
            return false;
        }
        else if(!reg.test(name)){
            namePrompt.innerHTML='姓名不符合要求';
            return false;
        }else{
            return true;
        }
    }
    //当鼠标放在学号文本框时，提示文本及样式。
    function checkNumFocus(){
        var studentNum=document.getElementById('num');
        studentNum.className="import_prompt";
        var numPrompt=document.getElementById('numPrompt');
        numPrompt.innerHTML="以S开头，其余都是数字的10位字符";
    }
    /*当鼠标离开学号文本框时，提示文本及样式*/
    function checkNumBlur(){
        var numPrompt=document.getElementById('numPrompt');
        numPrompt.innerHTML=null;
        var reg=/^[S]\d{9}/;
        var xuehao=document.getElementById('num').value;
        //先验证是否为空
        if(xuehao===""){
            numPrompt.innerHTML="学号不能为空！";
            return false;
        }
        else if(!reg.test(xuehao)){
            numPrompt.innerHTML='学号格式有误';
            return false;
        }
        else{
            return true;
        }
    }
    //验证手机号
    function checkTelFocus(){
        var telNum = document.getElementById('phone');
        telNum.className = "import_prompt";
        var telPrompt = document.getElementById('phonePrompt');
        telPrompt.innerHTML = '请输入手机号';
    }
    function checkTelUp(){
        var phone = document.getElementById('phone').value;
        var reg = /[^\d]/g;
        document.getElementById('phone').value = phone.replace(reg,'');
    }
    function checkTelBlur(){
        var telPrompt = document.getElementById('phonePrompt');
        telPrompt.innerHTML = null;
        var reg = /^([13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\\d{8}$/;
        var phone = document.getElementById('phone').value;
        if(phone===''){
            telPrompt.innerHTML='手机号不能为空!';
            return false;
        }
        if(!reg.test(phone)){
            telPrompt.innerHTML = '手机号格式错误';
            return false;
        }else{
            return true;
        }
    }
    //邮箱的验证，必须符合邮箱的格式。
    function checkEmailFocus(){
        var email=document.getElementById("email");
        email.className="import_prompt";
        var emailPrompt=$("emailPrompt");
        emailPrompt.innerHTML="请输入您常用的电子邮箱";
    }
    function checkEmailBlur(){
        var emailPro=document.getElementById("emailPrompt");
        emailPro.innerHTML=null;
        var emailValue=document.getElementById("email").value;
        var reg = /^[a-zA-Z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if(emailValue===""){
            emailPro.innerHTML="邮箱不能为空！";
            return false;
        }
        else if(!reg.test(emailValue)){
            emailPro.innerHTML = '邮箱格式错误';
            return false;
        }
        else{
            return true;
        }
    }
    //表单提交时验证表单内容输入的有效性
    function checkForm(){
        var flagUser = checkUserBlur();
        var flagPsw = checkPassBlur();
        var flagName=checkNameBlur();
        var flagNum=checkNumBlur();
        var flagPhone = checkTelBlur();
        var flagEmail=checkEmailBlur();
        if(flagUser === true && flagPsw === true && flagName===true &&flagNum===true &&flagPhone === true && flagEmail===true &&flagCourse===true){
            return true;
        }
        else{
            return false;
        }
    }
</script>
</html>复制代码
表单匹配正则表达式
