`
windy_star
  • 浏览: 14277 次
  • 性别: Icon_minigender_1
  • 来自: 天津
最近访客 更多访客>>
社区版块
存档分类

在HTML中使用JSValidate 例子

阅读更多

1.html源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="Content-Language" content="zh-cn">
<title>JavaScript Validation Framework</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script language="JavaScript" src="validation-framework.js"></script>
<SCRIPT LANGUAGE="JavaScript" src="site.js"></SCRIPT>
</head>

<body>

<br />

<table cellpadding="10" width="760" cellspacing="0" align="center" class="ContentTable">
<tr>
<td class="Nav" valign="top">
<br />
</td>
<td valign="top">

<script language="JavaScript" src="validation-framework.js"></script>

<div id="error" style="color:red;font-weight:bold"></div>
<form id="form2" name="form2" method="post" action="/webproject2/servlet/survey" onsubmit="return doValidate(this)">
  <table width="408" border="0">
    <tr>
      <th width="135" align="left" scope="col">姓名:</th>
      <th width="257" align="left" scope="col"><label>
        <input name="name" type="text" id="name" size="20" />
      </label></th>
    </tr>
    <tr>
      <th align="left" scope="row">E_mail地址:</th>
      <td align="left"><input name="email" type="text" id="email" size="40" /></td>
    </tr>
    <tr>
      <th height="26" align="left" scope="row">年龄:      </th>
      <td align="left"><label>
      <input type="radio" name="age" id="radio" value="18" />
      小于18
      <input name="age" type="radio" id="radio2" value="18-40" checked="checked" />
      18-40
      <input type="radio" name="age" id="radio3" value="40" />
      40以上
      </label></td>
    </tr>
    <tr>
      <th align="left" scope="row">编程时间:</th>
      <td align="left"><label>
        <select name="code" id="code">
          <option value="never">不编程</option>
          <option value="6" selected="selected">小于6个月</option>
          <option value="6-12">6个月到12个月</option>
          <option value="12-24">12-24个月</option>
          <option value="24">大于24个月</option>
                                                </select>
      </label></td>
    </tr>
    <tr>
      <th align="left" scope="row">熟悉操作系统:</th>
      <td align="left"><label>
        <select name="os" size="4" multiple="multiple" id="os">
          <option value="WinXP" selected="selected">WinXP</option>
          <option value="Win2000/2003">Win2000/2003</option>
          <option value="Mac OS">Mac OS</option>
          <option value="Linux">Linux</option>
                                                                                </select>
      </label></td>
    </tr>
    <tr>
      <th height="23" align="left" scope="row">编程语言:</th>
      <td align="left"><label>
        <input name="language" type="checkbox" id="language" value="Java" />
        Java
        <input name="language" type="checkbox" id="language" value="C" />
        C
        <input name="language" type="checkbox" id="language" value="C++" />
        C++
        <input name="language" type="checkbox" id="language" value="C#" />
        C#
        <input name="language" type="checkbox" id="language" value="VB" />
      VB</label></td>
    </tr>
    <tr>
      <th align="left" scope="row">建议:</th>
      <td align="left"><label>
        <textarea name="comment" cols="40" rows="5" id="comment"></textarea>
      </label></td>
    </tr>
    <tr>
      <th align="left" scope="row"><label>
        <input type="submit" name="submit" id="submit" value="提交" />
      </label></th>
      <td align="left"><label>
        <input type="reset" name="reset" id="reset" value="重置" />
      </label></td>
    </tr>
    
  </table>
</form>

</body>

</html>

 

2.修改validation-config.xml中的配置文件

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE validation-config SYSTEM "validation-config.dtd">
<validation-config lang="auto">
	<form id="form2" show-error="error" show-type="all">
		<field name="name" display-name="姓名" onfail="">
			<depend name="required" />
			<depend name="commonChar" />
			<depend name="minLength" param0="3"/>
			<depend name="maxLength" param0="20"/>
		</field>
		<field name="email" display-name="email邮箱">
			<depend name="required" />
			<depend name="email" />
		</field>			
		<field name="age" display-name="年纪">
			<depend name="required" />			
		</field>
		<field name="code" display-name="编程时间">
			<depend name="required" />			
		</field>
         <field name="os" display-name="使用的操作系统">
			<depend name="required" />			
		</field>
		<field name="language" display-name="使用的编程语言">
			<depend name="required" />			
		</field>
		<field name="comment" display-name="建议">
			<depend name="required" />			
		</field>
	</form>

</validation-config>

  

 

分享到:
评论

相关推荐

    jquery validate.js表单验证入门实例(附源码)

    为此,小编自己做了一个jquery validate.js表单验证入门实例,写的不是特别好,但应该适用于初学者,分享给大家。 以下是validate.js表单验证入门实例参考源码,文章下面有源码下载地址: &lt;html&gt; &lt;head&...

    jQuery表单验证例子(demo)

    jquery.validate校验的例子,解压文件夹,demo.html可以直接运行

    JavaScript对象验证库js-validator.zip

    使用 js-validator 来验证对象或者 JSON 是否符合规则非常方便,而且具有很好的可扩展性。举个例子var example = {  text: 'Hello world!',  date: '2015-07-07',  comments: null,  },  rules = {  ...

    jQuery Validate初步体验(一)

    但是在学习的过程中,我也遇到了疑惑,网上的很多例子貌似都是依赖jquery.metadata.js这个库,然后在标签里写成class=”required remote” 这样的形式,class本身是呈现样式的,现在被附上各种校验的规则,看上去...

    js-valid:强大的 JavaScript 验证库

    script src =" ./node_modules/js-valid/validate.js " &gt; &lt;/ script &gt; git 克隆 &lt; script src =" ./js-valid/validate.js " &gt; &lt;/ script &gt; 例子 &lt;!DOCTYPE html &gt; &lt; html lang =" en ...

    jquery插件使用方法大全

    并且可以在不同的js文件中做相同的操作,即$(document).ready (fn)可以在一个页面中重复出现,而不会冲突。基本上Jquery的很多plugin都是利用这个特性,正因为这个特性,多个plugin共同使用起来,在初始化时不会发生...

    shop-prereg-client-validation

    validation.git",如何使用它您需要将 'preregCommonDirectives' 作为 Angular 模块之一包含在内然后您可以在 html 页面或模板的输入字段中添加指令例如:'postcode-validate' 可以如下使用以上例子用于迅雷网站项目...

    validate-us:轻量级的库以声明式样式进行表单验证。 需要jQuery(还)

    安装下载此软件包,并在jQuery库之后的页脚部分包含名为validate-us.min.js的脚本。关于该库处理用户预定义规则与html表单的声明性连接。 该库不包含任何表单处理,消息警报或样式。 用户应为此类任务提供自己的回调...

    struts自我学习过程程序以及说明

    LangSelector.js 转换器: ConvertHWorld.java LocaleConverter.java xwork-conversion.properties struts.xml ConverHWorld.jsp Product.java ProductConfirm.java AddProducts.jsp ShowProducts.jsp ...

    正则表达式

    如果想在正则表达式中使用特殊的标点符号,必须在它们之前加上一个 "\" . 2.字符类 将单独的直接符放进中括号内就可以组合成字符类.一个字符类和它所包含的任何一个字符都匹配,所以正则表达式 / [abc] / 和字母 ...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    9.JS精简网页音乐播放器 浮动在页面顶部像工具栏 10.超强JS网页版泡泡龙游戏下载 11.兼容各浏览器JS+CSS水平和垂直无缝图片滚动效果代码 12.漂亮暖色调js+flash平滑过渡大屏图片切换的广告代码 13.实用国外...

Global site tag (gtag.js) - Google Analytics