jquery中validation表单验证

最新推荐文章于 2024-03-23 09:36:04 发布

panda929

最新推荐文章于 2024-03-23 09:36:04 发布

阅读量1.6k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/panda929/article/details/51121589

版权

这篇博客介绍了如何利用jQuery的validationEngine插件进行前端表单验证，内容包括自定义提示信息的方法。

摘要由CSDN通过智能技术生成

validation使前端验证变得很方便，下面简单介绍下使用方法

<pre name="code" class="html"><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>validation</title>
		<script src="javaScript/jquery.min.js" type="text/javascript"></script>
		<link href="javaScript/plugs/jquery-validation/css/validationEngine.jquery.css" rel='stylesheet'/>
		<script src="javaScript/plugs/jquery-validation/languages/jquery.validationEngine-zh_CN.js" type="text/javascript"></script>
		<script src="javaScript/plugs/jquery-validation/jquery.validationEngine.js" type="text/javascript"></script>
	</head>
	<body>
		<!-- 初始化 -->
		<script type="text/javascript">
		$(function(){
			$("#commentForm").validationEngine();			
		});
		</script>
		<form id="commentForm" method="get" action="www.baidu.com">
			<br></br><br></br>
			<p>账  户：<input type="text" class="validate[required,minSize[3]]" /></p>
			<p>密  码：<input id="pwd" type="password" class="validate[required]"/></p>
			<p>确认密码：<input type="password" class="validate[required,equals[pwd]]"/></p>	
			<input type="submit" value="登录"/>
		</form>
	</body>
</html>

jquery.validationEngine-zh_CN.js中是自定义的提示内容

(function($){
    $.fn.validationEngineLanguage = function(){
    };
    $.validationEngineLanguage = {
        newLang: function(){
            $.validationEngineLanguage.allRules = {
                "required": { // Add your regex rules here, you can take telephone as an example
                    "regex": "none",
                    "alertText": "* 此处不可为空",
                    "alertTextCheckboxMultiple": "* 请选择一个项目",
                    "alertTextCheckboxe": "* 您必须钩选此栏",
                    "alertTextDateRange": "* 日期范围不可空白"
                },
                "dateRange": {
                    "regex": "none",
                    "alertText": "* 无效的 ",
                    "alertText2": " 日期范围"
                },
                "dateTimeRange": {
                    "regex": "none",
                    "alertText": "* 无效的 ",
                    "alertText2": " 时间范围"
                },
                "doubles": {
                    "regex": "none",
					"alertText": "* 不是有效小数，小数位不得超过 ",
                    "alertText2": " 位"
                },
                "notEqId":{
                    "regex": "none",
                    "alertText": "* 此值与",
					"alertText2":"不能相同"
                },
                "notEq": {
                    "regex": "none",
                    "alertText": "* 此处不能填写"
                },
                "minSize": {
                    "regex": "none",
                    "alertText": "* 最少 ",
                    "alertText2": " 个字符"
                },
                "maxSize&