继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

强大的JQuery-实现表单校验

大吉大利今晚学习
关注TA
已关注
手记 265
粉丝 36
获赞 142

里面的js文件自行去官网下载,这个只贴HTML代码,希望起到举一反三的作用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script src="lib/jquery.validate.js" type="text/javascript"></script>
<script src="lib/jquery.validate.messages_cn.js" type="text/javascript"></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">
    $(document).ready(function(){

    $("#commentForm").validate({
    rules: {
    username: {
    required: true,
    minlength: 2
    },
    email: {
    required: true,
    email: true
    },
    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" />
</p>
<p>
<label for="cemail">电子邮件</label>
<em>
</em><input id="cemail" name="email" size="25"  />
</p>
<p>
<label for="curl">网址</label>
<em>  </em><input id="curl" name="url" size="25"  value="" />
</p>
<p>
<label for="ccomment">你的评论</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea>
</p>
<p>
<input class="submit" type="submit" value="提交"/>
</p>
</fieldset>
</form>
</body>
</html>

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP