angular js h5關於表單驗證的例子
阿新 • • 發佈：2017-05-20
checked tro mis scrip att sta error 自定義 account
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;
width: 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;
width: 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 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("");
}
}
};
angular js h5關於表單驗證的例子