html5验证

最新推荐文章于 2021-06-26 10:08:26 发布

fangwenzheng88

最新推荐文章于 2021-06-26 10:08:26 发布

阅读量447

点赞数

分类专栏： html

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header>
<h3>用户注册</h3>
</header>
<nav>
<span style="color: #666; font-size: 14px">已有账号?</span><a href="#">去登录?</a><p></p><p></p>
</nav>
<section>
<fieldset>
<legend>请正确填写相关信息</legend>
<form action="#" method="post" autocomplete="on">
<p><span style="letter-spacing: 1.3em">真实姓</span>名：<label><input type="text" required name="name" pattern="[\u4e00-\u9fa5]{2,}" oninvalid="validatelt(this,'真实姓名必须是中文，且长度不小于2')"/></label></p>
<p><span style="letter-spacing:6em">昵</span>称：<label><input type="text" placeholder="该昵称用于登录" required name="nichen"/></label></p>
<p><span style="letter-spacing: 1.3em">登录密</span>码：<label><input type="password" pattern="[A-Za-z0-9]{6,30}" name="password" oninvalid="validatelt(this,'密码长度至少为六位，且不能有中文')" /></label></p>
<p><span style="letter-spacing: 6em">性</span>别：<label>
<input type="radio" name="sex" value="man" />男：</label>
<input type="radio" name="sex" value="women"/>女：</label>
</p>
<p><span style="letter-spacing: 1.3em">出生日</span>期：<label><input type="date" name="birthday" max="2016/7/10" required/></label></p>
<p><span style="letter-spacing: 1.3em">电子邮</span>箱：<label><input name="email" type="email" required/></label></p>
<p><span style="letter-spacing: 1.3em">联系电</span>话：<label><input name="phone" type="text" required pattern="1[34578]\d{9}$" oninvalid="validatelt(this,'电话号只能是11位的整数')" /></label></p>
<p><span>选择你喜欢的颜色：</span><label><input name="color" type="color" required/></label></p>
<input type="submit"/>
</form>
</fieldset>
</section>
<footer>
<hr/>
底部栏
</footer>
</body>
<script>
//对悬浮窗的设置
function validatelt(inputelement,err){
if(inputelement.validity.patternMismatch){
inputelement.setCustomValidity(err);
//错误后就清空，不过执行顺序有点问题就不要了
// if(confirm("输入有误,是否清空此项？")){
// inputelement.value="";
// }
}else{
inputelement.setCustomValidity("");
return true;
}
}
</script>
</html>

可以添加验证通过和不通过的样式

.form input:valid{

background:url("../images/right1.png") no-repeat 210px 1px;
}

.form input:focus:invalid{
background:url("../images/error1.png") no-repeat 210px 0px;

};

<html>
<head>
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
</head>
<body>
<form action="" id='submitform'>
username: <br>
<input type="text" name="username" value="" required="required"> <br>
password: <br>
<input type="text" name="password" value="" required="required"> <br><br>
<input type="submit" value="Submit">
</form>
<script type="text/javascript" language="javascript">
$("#submitform").on("submit", function(ev) {
$.ajax({
......
});
//阻止submit表单提交
ev.preventDefault();
//或者return false
//return false;
});
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<metacharset="utf-8">

</head>

<body>

<formaction="#"method="post"onsubmit="return false">

<inputtype="text"name="mobile"id="mobile"placeholder="请输入手机号码"

pattern="^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$"oninvalid="validateIt(this,'手机号码格式错误')"oninput="validateIt(this,'手机号码格式错误')"required/>

<inputtype="text"name="age"id="address"placeholder="请输入地址"pattern="^.{5,200}$"oninvalid="validateIt(this,'地址不符合规范')"oninput="validateIt(this,'地址不符合规范')"required/>

<buttontype="submit"id="submit" >提交</button>

</form>

</body>

<scriptsrc="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

functionvalidateIt(inputelement,errMsg){

if(inputelement.validity.patternMismatch){

inputelement.setCustomValidity(errMsg);

}else{

inputelement.setCustomValidity('');//输入内容符合验证条件

}

returntrue;

}

$(function() {

if ($("*:invalid") == 0) {

// 如果验证都通过,可以不通过表单

$("#submit").submit(function() {

$.ajax({

type:"post",

url:"你的地址",

data: $("form").serialize(),

async:true,

success:function(data) {

alert(data);

dataType:"json" // json 格式的返回值

});

}});

</script>

fangwenzheng88

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5验证

> html> head lang="en"> meta charset="UTF-8"> title>title> head> body> header> h3>用户注册h3> header> nav> span style="color: #666; font-size: 14px">已有账号?s
复制链接

扫一扫

专栏目录