angular js h5关于表单验证的例子
Posted yaomengli
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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;
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_][email protected](([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_][email protected](([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关于表单验证的例子的主要内容，如果未能解决你的问题，请参考以下文章