javascript-表單驗證

時間 2019-11-20

原文原文鏈接

表單驗證：
1、非空驗證：
一、內容是否是空的。
判斷值的長度是否是0。length屬性。壓縮空格的函數。javascript

二、內容是否是改變了。html

2、對比驗證：
一、驗證兩個控件值的關係（相同，大小）java

二、驗證控件的值與某個固定值的關係。正則表達式

3、範圍驗證：express

4、格式驗證：
正則表達式。regularexpression
function checkEmail()
{
var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var txt = document.getElementById("txtEmail").value;
if(txt.match(reg) == null)
{
alert("郵箱格式不正確");
return false;
}
else
{
return true;
}
}
5、其它驗證：函數

案例1 註冊驗證ui

<script language="javascript">
var c=document.getElementById("uid").style.color;
</script>
</head>

<body>
<form>
<table width="600" border="0"cellpadding="0"cellspacing="0">
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
  <td width="20%" align="right" bgcolor="#CCCCCC" >用戶名：</td>
  <td width="30%" align="center" bgcolor="#CCCCCC" ><input type="text" style="color:#999" onfocus="dofocus()" onblur="doblur()" value="必填"id="uid">
  </td>
  <td width="50%" >&nbsp;</td>
</tr>
<tr>
  <td width="20%" align="right" bgcolor="#CCCCCC">密碼：</td>
  <td width="30%" align="center" bgcolor="#CCCCCC"><input type="text"id="pwd1">
  </td>
  <td width="50%">&nbsp;</td>
</tr>
<tr>
  <td width="20%" align="right" bgcolor="#CCCCCC">確認密碼：</td>
  <td width="30%" align="center" bgcolor="#CCCCCC"><input type="text"id="pwd2">
  </td>
  <td width="50%">&nbsp;</td>
</tr>
<tr>
  <td width="20%" align="right" bgcolor="#CCCCCC">郵箱：</td>
  <td width="30%" align="center" bgcolor="#CCCCCC"><input type="text"id="txtEmail">
  </td>
  <td width="50%">&nbsp;</td>
</tr>
<tr>
  <td colspan="2" width="20%" align="center" bgcolor="#CCCCCC">
 <input style="text-align:center" type="submit" value="提交" onclick=" return docheck()">/*return docheck()是返回給網頁 斷定 真假 */
</td>
 
  </td>
  <td width="50%">&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>
<script language="javascript">
var c=document.getElementById("uid").style.color;/*注意取變量的位置 有時候會在斷定前 沒有效果，最上面有一個 沒有效果*/

/*下面是用戶名中必填效果的函數*/
function  dofocus()
{
    var b=document.getElementById("uid");
    if(b.value=="必填"&&b.style.color==c)
    {
    b.value="";
    b.style.color="black";
    }
}
function doblur()
{
    var b=document.getElementById("uid")
    if(b.value.length=="0")
    {
        b.value="必填";
        b.style.color=c}
    }
/* 一塊兒驗證 注意error變量的用法*/
function yonghu()
{
    var error="";
    var d=document.getElementById("uid");
    if(d.value=="必填"||d.value.length==0)
  {
    return "用戶名不能爲空。\n"
    }
    else
    {
        return ""
    }
    
}
    function mima()
    {   var error="";
        var d1=document.getElementById("pwd1")
        var d2=document.getElementById("pwd2")
        if(d1.value.length==0)
        {
            error+="密碼不能爲空\n";
        }
            if(d2.value.length==0)
            {
                error+="確認密碼不能爲空\n";
                }
        
         if (d1.value!=d2.value)
        {  error+="2次密碼不一致.\n";
            }
            
                return error;
                
    }
    function checkEmail()
    {var error="";
        var d=document.getElementById("txtEmail");
        if(d.value.length==0)
        {
            error+="郵箱不能爲空。\n";
            
            }
            else
            {
        var reg =/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                if(d.value.match(reg)==null)
                   {
                    error+="郵箱格式錯誤。\n";
                    }
                }
    
                return error;
        
        }
function docheck()
{
    var allerror="";
allerror+=yonghu();
allerror+=mima();
allerror+=checkEmail();
    if(allerror.length==0)
    {
        return true;
        }
        else
        
        {
            alert(allerror);
            return false;
            }
    }
</script>

案例2 微博輸入字數限制spa

<script language="javascript">
function jisuan()
{
    var d = document.getElementById("txt");
    var s = d.value;
    var span = document.getElementById("num");
    span.innerHTML = 140-s.length;
    window.setTimeout("jisuan()",500)/*若是用鼠標點右鍵粘貼 會失去onkeyup的效果 用延時解決*/
}

</script>
</head>

<body>
    <form action="" method="get">
        <textarea id="txt" name="txt" cols="50" rows="10" onmousedown="jisuan()" onkeyup="jisuan()"></textarea>
        <div>你還能夠再輸入<span id="num">140</span>個字</div>
    </form>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。