zoukankan html css js c++ java

angular js h5关于表单验证的例子

angular js表单验证

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="angular.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        .line{
            line-height: 35px;
        }
        p span{

           display: inline-block;
             60px;
            height: 20px;
            text-align: center;

        }
    </style>
</head>
<body ng-app="myApp" ng-controller="ctrl">
<h3>注册新会员</h3>
<form class="form-horizontal" name="myform" action="#">
    <div class="form-group">
        <label for="inputtext3" class="col-sm-2 control-label">用户名</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="inputtext3"
                name="text1" ng-model="text1" required pattern="^[a-zA-Z0-9_]*$" minlength="6" maxlength="12">
        </div>
        <span class="text-danger line">*</span>
        <span class="text-danger line" ng-show="myform.text1.$error.required&&myform.text1.$touched ">用户名不能为空</span>
        <span class="text-danger line" ng-show="myform.text1.$invalid&&myform.text1.$dirty">格式由字母数字下划线组成6-12位</span>
    </div>
    <div class="form-group">
        <label for="inputtemail" class="col-sm-2 control-label">email</label>
        <div class="col-sm-6">
            <input type="email" class="form-control" id="inputtemail"
                   name="email1" ng-model="email1" required pattern="^[0-9a-z_]+@(([0-9a-z]+)[.]){1,2}[a-z]{2,3}$">
        </div>
        <span class="text-danger line">*</span>
        <span class="text-danger line" ng-show="myform.email1.$error.required&&myform.email1.$touched ">邮箱不能为空</span>
        <span class="text-danger line" ng-show="myform.email1.$invalid&&myform.email1.$dirty">邮箱格式不正确</span>
    </div>

    <div class="form-group">
        <label for="inputpass" class="col-sm-2 control-label">密码</label>
        <div class="col-sm-6">
            <input type="password" class="form-control" id="inputpass" ng-model="pas" name="pas"
                   required minlength="6" maxlength="15"  oninput="onInput(event)" >
        </div>
        <span class="text-danger line">*</span>
        <span class="text-danger line" ng-show="myform.pas.$error.required&&myform.pas.$touched ">密码不能为空</span>
        <span class="text-danger line" ng-show="myform.pas.$invalid&&myform.pas.$dirty">密码长度为6-15位</span>
    </div>
    <p class="col-sm-12 col-sm-offset-2">密码强度    <span class="pass1"> 弱 </span> <span class="pass2">中</span> <span class="pass3">强</span></p>
    <div class="form-group">
        <label for="inputpas" class="col-sm-2 control-label">确认密码</label>
        <div class="col-sm-6">
            <input type="password" class="form-control" id="inputpas" ng-model="pass" name="pass"  ng-blur="foo()"  ng-disabled="myform.pas.$error.required">
        </div>
        <span class="text-danger line">*</span>
        <span class="text-danger line" ng-show="show1">确认密码与密码不一致</span>
    </div>
    <div class="form-group">
        <label for="QQ" class="col-sm-2 control-label">QQ</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="QQ" ng-model="QQ" name="QQ" pattern="^[1-9](d){4,10}$">
        </div>
        <span class="text-danger line" ng-show="myform.QQ.$invalid">QQ格式不正确</span>
    </div>
    <div class="form-group">
        <label for="inputemail3" class="col-sm-2 control-label">办公电话</label>
        <div class="col-sm-6">
            <input type="tel" class="form-control" id="tel" ng-model="tel1" name="tel1"  pattern="d{3,4}-d{7,8}" >
        </div>
        <span class="text-danger line" ng-show="myform.tel1.$invalid">电话格式不正确</span>
    </div>
    <div class="form-group">
        <label for="inputemail3" class="col-sm-2 control-label">手机</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="inputemail3" ng-model="text2" name="text2" pattern="^([1][3|5|8]+d{9})" >
        </div>
        <span class="text-danger line" ng-show="myform.text2.$invalid">手机号格式不正确</span>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-6">
            <div class="checkbox">
                <label>
                    <input type="checkbox" id="chec" ng-click="foo2()" checked> 我已看过并接受 <span id="xieyi" onclick="foo3()">《用户协议》</span>
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default" ng-disabled="flag">立即注册</button>
        </div>
    </div>
</form>

</body>
<script>
    var app=angular.module("myApp",[]);
    app.controller("ctrl",function($scope){
        $scope.show1=false;
   $scope.foo=function(){
       var val= document.getElementById("inputpass").value;
       var val2= document.getElementById("inputpas").value;
       if(val2!=val){
          // alert(11111);
           $scope.show1=true
       }else{
           $scope.show1=false
       }
 };

      $scope.flag=false;
        var chec=document.getElementById("chec");
        $scope.foo2=function(){
            if(chec.checked==true){
                $scope.flag=false
            }else{
                $scope.flag=true
            }
        }
 });
   //document.getElementById("xieyi").

   function foo3(){
       window.open("https://passport.baidu.com/static/passpc-account/html/protocal.html","_blank")
   }

    /*正则判断*//*改变密码强度*/
    function checkStrong(val) {
        var modes = 0;
        if (val.length < 6) return 0;
        if (/d/.test(val)) modes++; //数字
        if (/[A-Za-z]/.test(val)) modes++; //大小写
        if (/W/.test(val)) modes++; //特殊字符
        if (val.length > 15) return 4;
        return modes;
    }

    function onInput(event){
        console.log(event.target.name);
        var val=event.target.value;
        if(event.target.name=="pas"){
            var num = checkStrong(val);
            console.log(num);
            switch (num) {
                case 0:
                    document.getElementsByClassName("pass1")[0].style.background='';
                    document.getElementsByClassName("pass2")[0].style.background='';
                    document.getElementsByClassName("pass3")[0].style.background='';
                    break;
                case 1:
                    document.getElementsByClassName("pass1")[0].style.background='#79BC77';
                    document.getElementsByClassName("pass2")[0].style.background='';
                    document.getElementsByClassName("pass3")[0].style.background='';
                    break;
                case 2:
                    document.getElementsByClassName("pass1")[0].style.background="#79BC77";
                    document.getElementsByClassName("pass2")[0].style.background='#79BC77';
                    document.getElementsByClassName("pass3")[0].style.background='';
                    break;
                case 3:
                    document.getElementsByClassName("pass1")[0].style.background='#79BC77';
                    document.getElementsByClassName("pass2")[0].style.background='#79BC77';
                    document.getElementsByClassName("pass3")[0].style.background='#79BC77';
                    break;
                default:
                    break;
            }
        }
        if(event.target.name=="name"){
            console.dir(event.target);
        }
    }


</script>
</html>


h5 表单验证

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
   span{
       line-height: 35px;
   }
   p span{

       display: inline-block;
        60px;
       height: 30px;
       text-align: center;


   }
    </style>
</head>
<body>

<div class="container" >
    <h3 >注册新会员</h3>
    <form id="my-form" class="form-horizontal myform">
        <div class="form-group">
            <label for="name1" class="col-sm-2 control-label" >用户名</label>
            <div class="col-sm-6">
                <input type="email" class="form-control" id="name1" placeholder="用户名" onblur="foo1()">
            </div>
            <span class="text-danger col-sm-1">*</span>
            <span id="username_err" class="col-sm-3"></span>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-6">
                <input type="email" class="form-control" id="inputEmail3" placeholder="Email" oninput="email()">
            </div>
            <span class="text-danger col-sm-1">*</span>
            <span id="email1" class="col-sm-3"></span>
        </div>
        <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-6">
                <input type="password" class="form-control" name="pas" id="inputPassword3" onblur="pas1() " oninput="onInput(event)"/>
               <!-- <input type="password" class="form-control" name="pas" id="inputPassword3" placeholder="Password" onblur="pas()">-->
            </div>
            <span class="text-danger col-sm-1">*</span>
            <span id="password_err" class="col-sm-3"></span>
            <p class="col-sm-12 col-sm-offset-2">密码强度    <span class="pass1"> 弱 </span> <span class="pass2">中</span> <span class="pass3">强</span></p>
        </div>
        <div class="form-group">
            <label for="inputPass" class="col-sm-2 control-label">确认密码</label>
            <div class="col-sm-6">
                <input type="password" class="form-control" id="inputPass" placeholder="Password" onblur="pass()" >
            </div>
            <span class="text-danger col-sm-1">*</span>
            <span class="col-sm-3" id="psd"></span>
        </div>

        <div class="form-group">
            <label for="qq" class="col-sm-2 control-label">QQ</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="QQ" placeholder="qq" onblur="qq()">
            </div>
            <span class="col-sm-4" id="QQ_err"></span>
        </div>

        <div class="form-group">
            <label for="tel1" class="col-sm-2 control-label">家庭电话</label>
            <div class="col-sm-6">
                <input type="tel" class="form-control" id="tel1" placeholder="家庭电话" oninput="tel()">
            </div>
            <span class="col-sm-4" id="tel1_err"></span>
        </div>
        <div class="form-group">
            <label for="tel2" class="col-sm-2 control-label">手机</label>
            <div class="col-sm-6">
                <input type="tel" class="form-control" id="tel2" placeholder="手机" oninput="phone1()">
            </div>
            <span class="col-sm-4" id="tel2_err"></span>
        </div>



        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-6">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="chec" onclick="check()" > 我已看过并接受 <span id="xieyi" onclick="foo3()">《用户协议》</span>
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-default"  id="btn" disabled>立即注册</button>
            </div>
        </div>
    </form>

</div>
</body>
<script>


/*验证用户名*/
function foo1(){
    var Rex=/^[a-zA-Z0-9_]{6,12}$/;
    var name1=document.getElementById("name1").value;
    var username_err=document.getElementById("username_err");
    if(name1==""){
        username_err.innerHTML="用户名不能为空";
        username_err.style.color="red";
        return false
    }else{
        if(!name1.match(Rex)){
            username_err.innerHTML="用户名格式由字母数字下划线组成6-12位";
            username_err.style.color="red";
            return false
        }else{
            username_err.innerHTML="";
            return true
        }

    }
}
/*验证email*/
function email(){
    var Rex=/^[0-9a-z_]+@(([0-9a-z]+)[.]){1,2}[a-z]{2,3}$/;
    var email=document.getElementById("inputEmail3").value;
    var username_err=document.getElementById("email1");
    if(email==""){
        username_err.innerHTML="邮箱名不能为空";
        username_err.style.color="red";
        return false
    }else{
        if(!email.match(Rex)){
            username_err.innerHTML="邮箱格式不正确";
            username_err.style.color="red";
            return false
        }else{
            username_err.innerHTML="";
            return true
        }

    }
}


验证企业邮箱

function email1(){

    var Rex=/^[w-]+(.[w-]+)*@[w-]+(.[w-]+)+$/;
    var email=document.getElementById("email").value;
    var username_err=document.getElementById("err_email");
    if(email==""){
        username_err.innerHTML="邮箱不能为空";
        username_err.style.color="red";
        return false
    }else{
        if(!Rex.test(email)){
            username_err.innerHTML="邮箱格式不正确";
            username_err.style.color="red";
            return false
        }else{
            username_err.innerHTML="";
            return true
        }

    }
}







/*验证密码*/
function pas1(){

    var pas1=document.getElementById("inputPassword3").value;
   // console.log(pas1);
    var username_err=document.getElementById("password_err");
    if(pas1==""){
        username_err.innerHTML="密码不能为空";
        username_err.style.color="red";
        return false
    }else{
        if(pas1.length>15||pas1.length<6){
            username_err.innerHTML="密码长度为6-15位";
            username_err.style.color="red";
            return false
        }else{
            username_err.innerHTML="";
            return true
        }

    }
}
/*确认密码验证*/
function pass(){

    var pas=document.getElementById("inputPassword3").value;
    var  pass=document.getElementById("inputPass").value;
    var username_err=document.getElementById("psd");


        if(pas!==pass){
            alert(1111);
            username_err.innerHTML="确认密码与密码不一致";
            username_err.style.color="red";
            return false
        }else{
            username_err.innerHTML="";
            return true
        }
}
/*验证QQ*/
function qq(){
    var QQ=document.getElementById("QQ").value;
    var username_err=document.getElementById("QQ_err");
    var Rex=/^[1-9](d){4,10}$/;
    if(!QQ.match(Rex)){
        username_err.innerHTML="请输入正确的QQ";
        username_err.style.color="red";
        return false
    }else{
        username_err.innerHTML="";
    }

}

/*验证电话*/
function tel(){
    var tel1=document.getElementById("tel1").value;
    var username_err=document.getElementById("tel1_err");
    var Rex=/d{3,4}-d{7,8}/;
    if(!tel1.match(Rex)){
        username_err.innerHTML="电话格式不正确";
        username_err.style.color="red";
        return false
    }else{
        username_err.innerHTML="";
    }

}
/*验证手机*/
function phone1(){
    var tel2=document.getElementById("tel2").value;
    var username_err=document.getElementById("tel2_err");
    var Rex=/^([1][3|5|8]+d{9})/;
    if(!tel2.match(Rex)){
        username_err.innerHTML="电话格式不正确";
        username_err.style.color="red";
        return false
    }else{
        username_err.innerHTML="";
    }

}





   function foo3(){
       window.open("https://passport.baidu.com/static/passpc-account/html/protocal.html","_blank")
   }

    /*正则判断*//*改变密码强度*/
/*正则判断*//*改变密码强度*/
function checkStrong(val) {
    var modes = 0;
    if (val.length < 6) return 0;
    if (/d/.test(val)) modes++; //数字
    if (/[A-Za-z]/.test(val)) modes++; //大小写
    if (/W/.test(val)) modes++; //特殊字符
    if (val.length > 15) return 4;
    return modes;
}

function onInput(event){
    console.log(event.target.name);
    var val=event.target.value;
    if(event.target.name=="pas"){
        var num = checkStrong(val);
        console.log(num);
        switch (num) {
            case 0:
                document.getElementsByClassName("pass1")[0].style.background='';
                document.getElementsByClassName("pass2")[0].style.background='';
                document.getElementsByClassName("pass3")[0].style.background='';
                break;
            case 1:
                document.getElementsByClassName("pass1")[0].style.background='#79BC77';
                document.getElementsByClassName("pass2")[0].style.background='';
                document.getElementsByClassName("pass3")[0].style.background='';
                break;
            case 2:
                document.getElementsByClassName("pass1")[0].style.background="#79BC77";
                document.getElementsByClassName("pass2")[0].style.background='#79BC77';
                document.getElementsByClassName("pass3")[0].style.background='';
                break;
            case 3:
                document.getElementsByClassName("pass1")[0].style.background='#79BC77';
                document.getElementsByClassName("pass2")[0].style.background='#79BC77';
                document.getElementsByClassName("pass3")[0].style.background='#79BC77';
                break;
            default:
                break;
        }
    }
    if(event.target.name=="name"){
        console.dir(event.target);
    }
}


/*勾选复选框按钮可用否则不可用*/
function check(){
 var chec=document.getElementById("chec");
 if(chec.checked==true){
     //alert(1111)
     document.getElementById("btn").removeAttribute("disabled")
 }else{
     //alert(22222)
     document.getElementById("btn").disabled="disabled"
 }
}


</script>
</html>

 h5  要利用下面的方法自定义错误提示

正则验证表单
window.onload=function(){
    var user=document.getElementById("name");
    user.onblur=function(){
        if(user.value){
            user.setCustomValidity("");//现将有输入时的提示设置为空
        }else if(user.validity.valueMissing){
            user.setCustomValidity("用户名不能为空");
        }
        if(user.validity.patternMismatch){
            user.setCustomValidity("格式不正确，提示请输入字母，下划线，数字，6-12位");
        }
    };

    var btn=document.getElementById("btn");
    btn.onclick=function(){
        if(document.getElementById("password").value!=document.getElementById("password1").value){
            document.getElementById("password1").setCustomValidity("两次密码输入不一致");
        }else{
            document.getElementById("password1").setCustomValidity("");
        }
    }
};

查看全文

相关阅读:
位记录——Windows 7已安装Sublime Text 3、cynwin、SublimeClang
尺度空间（Scale space）理论
 D3DXMatrixMultiply 函数
 素数推断算法(高效率）
去除win7 64位系统桌面图标小箭头
 Bag标签之中的一个行代码实行中文分词实例1
7个最好的免费杀毒软件下载
 利用Excel批量高速发送电子邮件
 Hibernate Criterion
IOS新手教程（二）-控制流

原文地址：https://www.cnblogs.com/yaomengli/p/6880603.html