表单验证 bootstrap

表单验证

非空验证

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

</head>

<body>
<form action="1.html" method="post">
            用户名:<input type="text" name="y" id="y" />
            <input type="submit" value="提交" onclick="return Ti()" />
        </form>
</body>
<script type="text/javascript">
         function Ti()
          {
            var y = document.getElementById("y").value;
            if(y=="")
            {
                alert("用户名为空");
                return false;
            }
            else
            {
                return true;    
            }
        }
</script>
</html>

相等验证

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

</head>

<body>
<form action="1.html" method="post">
            密码：<input type="password" name="p" id="p" />
            确认密码：<input type="password" name="qp" id="qp"/>
            <input type="submit" value="提交" onclick="return Ti()" />
        </form>
</body>
<script type="text/javascript">
function Ti()
        {
            var p = document.getElementById("p").value;    
            var qp = document.getElementById("qp").value;
            if(p==qp)
            {
                return true;
            }
            else
            {
                alert("输入的密码不一致");    
                return false;
            }
        }
</script>
</html>

范围验证

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

</head>

<body>
<form action="1.html" method="post">
年龄：<input type="text" name="n" id="n" />
            <input type="submit" value="提交" onclick="return Ti()" />
        </form>
</body>
<script type="text/javascript">
function Ti()
        {    
            var n = document.getElementById("n").value;
            if(n>18 && n<30)
            {
                return true;
            }
            else
            {
                alert("年龄不符");    
                return false;
            }
        }
</script>
</html>

正则验证

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

</head>

<body>
<form action="1.html" method="post">
      手机号：<input type="text" name="s" id="s" />
            <input type="submit" value="提交" onclick="return Ti()" />
        </form>
</body>
<script type="text/javascript">
        function Ti()
        {
            var s = document.getElementById("s").value;    
            var z = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])d{8}$/;
            if(s.match(z)==null)
            {
                alert("手机号不正确");
                return false;    
            }
            else
            {
                return true;    
            }
        }
</script>
</html>