jquery的学习之validation插件的应用

最新推荐文章于 2022-11-09 09:59:22 发布

阿诚哥JC

最新推荐文章于 2022-11-09 09:59:22 发布

阅读量169

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/a951101990/article/details/52211331

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>validation</title>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>
<script type="text/javascript" src="js/jquery.validate.messages_cn.js"></script>
<style type="text/css">
* {
font-family: Verdana;
font-size: 96%;
}
label {
width: 10em;
float: left;
}
label.error {
float: none;
color: red;
padding-left: .5em;
vertical-align: top;
}
p {
clear: both;
}
.submit {
margin-left: 12em;
}
em {
font-weight: bold;
padding-right: 1em;
vertical-align: top;
}
</style>
<script type="text/javascript">
$(function(){
$("#commentForm").validate({
rules: {
username: {
required: true,
minlength: 2,
messages: {
required: '请输入姓名',
minlength: '请输入至少两个字符'
}
},
email: {
required: true,
email: true,
messages: {
required: '请输入电子邮件',
email: '请检查电子邮件格式'
}
},
url: "url",
comment: "required"
}
});
})
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="#">
<fieldset>
<legend>一个简单的验证带验证提示的评论例子</legend>
<p>
<label for="cusername">姓名:</label><em>*</em>
<input id="cusername" name="username" size="25" minlength="2" required />
</p>
<p>
<label for="cemail">电子邮件:</label><em>*</em>
<input id="cemail" name="email" size="25" required/>
</p>
<p>
<label for="curl">网址：</label><em> </em>
<input id="curl" class="url" name="url" size="25" />
</p>
<p>
<label for="ccomment">你的评论:</label><em>*</em>
<textarea id="ccomment" name="comment" cols="22" required></textarea>
</p>
<p>
<input type="submit" class="submit" value="提交">
</p>
</fieldset>
</form>
</body>
</html>

阿诚哥JC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery的学习之validation插件的应用

validation* {font-family: Verdana;font-size: 96%;}label {width: 10em;float: left;}label.error {float: none;color: red;padding-left: .5em;vertical-align: top;}
复制链接

扫一扫