EASYUI表单扩展

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<!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″ />

<title>禁止访问</title>

<script type=”text/javascript” src=”jquery-1.4.4.min.js”></script>

<script type=”text/javascript” src=”jquery.easyui.min.js”></script>

<link rel=”stylesheet” type=”text/css” href=”themes/default/easyui.css”>

<link rel=”stylesheet” type=”text/css” href=”themes/icon.css”>

<script>

<!– 导入jquery.js  和easy_ui.js 自定义自己的 JS  家庭地址 是验证密码的–>

$(function(){

  $(‘#uiform input’).each(function () {

            if ($(this).attr(‘required’) || $(this).attr(‘validType’))

                $(this).validatebox();

        })

});

$.extend($.fn.validatebox.defaults.rules, {

    CHS: {

        validator: function (value, param) {

            return /^[\u0391-\uFFE5]+$/.test(value);

        },

        message: ‘请输入汉字’

    },

    ZIP: {

        validator: function (value, param) {

            return /^[1-9]\d{5}$/.test(value);

        },

        message: ‘邮政编码不存在’

    },

    QQ: {

        validator: function (value, param) {

            return /^[1-9]\d{4,10}$/.test(value);

        },

        message: ‘QQ号码不正确’

    },

    mobile: {

        validator: function (value, param) {

            return /^((\(\d{2,3}\))|(\d{3}\-)) 13\d{9}$/.test(value);

        },

        message: ‘手机号码不正确’

    },

    loginName: {

        validator: function (value, param) {

            return /^[\u0391-\uFFE5\w]+$/.test(value);

        },

        message: ‘登录名称只允许汉字、英文字母、数字及下划线。’

    },

    safepass: {

        validator: function (value, param) {

            return safePassword(value);

        },

        message: ‘密码由字母和数字组成,至少6位’

    },

    equalTo: {

        validator: function (value, param) {

            return value == $(param[0]).val();

        },

        message: ‘两次输入的字符不一至’

    },

    number: {

        validator: function (value, param) {

            return /^\d+$/.test(value);

        },

        message: ‘请输入数字’

    },

    idcard: {

        validator: function (value, param) {

            return idCard(value);

        },

        message:’请输入正确的身份证号码’

    }

});

/* 密码由字母和数字组成,至少6位 */

var safePassword = function (value) {

    return !(/^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\ \\\/\’\”]*)|.{0,5})$|\s/.test(value));

}

var idCard = function (value) {

    if (value.length == 18 && 18 != value.length) return false;

    var number = value.toLowerCase();

    var d, sum = 0, v = ’10×98765432′, w = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2], a = ‘11,12,13,14,15,21,22,23,31,32,33,34,35,36,37,41,42,43,44,45,46,50,51,52,53,54,61,62,63,64,65,71,81,82,91’;

    var re = number.match(/^(\d{2})\d{4}(((\d{2})(\d{2})(\d{2})(\d{3}))|((\d{4})(\d{2})(\d{2})(\d{3}[x\d])))$/);

    if (re == null || a.indexOf(re[1]) < 0) return false;

    if (re[2].length == 9) {

        number = number.substr(0, 6) + ’19’ + number.substr(6);

        d = [’19’ + re[4], re[5], re[6]].join(‘-‘);

    } else d = [re[9], re[10], re[11]].join(‘-‘);

    if (!isDateTime.call(d, ‘yyyy-MM-dd’)) return false;

    for (var i = 0; i < 17; i++) sum += number.charAt(i) * w[i];

    return (re[2].length == 9 || number.charAt(17) == v.charAt(sum % 11));

}

var isDateTime = function (format, reObj) {

    format = format || ‘yyyy-MM-dd’;

    var input = this, o = {}, d = new Date();

    var f1 = format.split(/[^a-z]+/gi), f2 = input.split(/\D+/g), f3 = format.split(/[a-z]+/gi), f4 = input.split(/\d+/g);

    var len = f1.length, len1 = f3.length;

    if (len != f2.length || len1 != f4.length) return false;

    for (var i = 0; i < len1; i++) if (f3[i] != f4[i]) return false;

    for (var i = 0; i < len; i++) o[f1[i]] = f2[i];

    o.yyyy = s(o.yyyy, o.yy, d.getFullYear(), 9999, 4);

    o.MM = s(o.MM, o.M, d.getMonth() + 1, 12);

    o.dd = s(o.dd, o.d, d.getDate(), 31);

    o.hh = s(o.hh, o.h, d.getHours(), 24);

    o.mm = s(o.mm, o.m, d.getMinutes());

    o.ss = s(o.ss, o.s, d.getSeconds());

    o.ms = s(o.ms, o.ms, d.getMilliseconds(), 999, 3);

    if (o.yyyy + o.MM + o.dd + o.hh + o.mm + o.ss + o.ms < 0) return false;

    if (o.yyyy < 100) o.yyyy += (o.yyyy > 30   1900 : 2000);

    d = new Date(o.yyyy, o.MM – 1, o.dd, o.hh, o.mm, o.ss, o.ms);

    var reVal = d.getFullYear() == o.yyyy && d.getMonth() + 1 == o.MM && d.getDate() == o.dd && d.getHours() == o.hh && d.getMinutes() == o.mm && d.getSeconds() == o.ss && d.getMilliseconds() == o.ms;

    return reVal && reObj   d : reVal;

    function s(s1, s2, s3, s4, s5) {

        s4 = s4 || 60, s5 = s5 || 2;

        var reVal = s3;

        if (s1 != undefined && s1 != ” || !isNaN(s1)) reVal = s1 * 1;

        if (s2 != undefined && s2 != ” && !isNaN(s2)) reVal = s2 * 1;

        return (reVal == s1 && s1.length != s5 || reVal > s4)   -10000 : reVal;

    }

};

</script>

</head>

<body>

<table class=”grid” id=”uiform”>

<tr><td>登录名:</td><td><input  required=”true” id=”txtUsername” type=”text” class=”txt03″ /></td><td>真实姓名:</td><td><input id=”txtTruename” validType=”CHS” required=”true” type=”text” class=”txt03″ /></td></tr>

<tr><td>登录密码:</td><td><input validType=”safepass”  required=”true” id=”txtPassword” name=”password” type=”password” class=”txt03″ /></td><td>Email:</td><td><input id=”txtEmail” name=”email”  validType=”email” type=”text” class=”txt03″ /></td></tr>

<tr><td>身份证号:</td><td><input validType=”idcard” id=”txtIdcard” name=”idcard” type=”text” class=”txt03″ /></td><td>QQ:</td><td><input validType=”QQ” id=”txtQq” name=”qq” type=”text” class=”txt03″ /></td></tr>

<tr><td>手机:</td><td><input validType=”mobile” id=”txtMobile” name=”mobile” type=”text” class=”txt03″ /></td><td>电话:</td><td><input id=”txtTel” name=”tel” type=”text” class=”txt03″ /></td></tr>

<tr><td>家庭住址:</td><td colspan=”3″><input validType=”equalTo[txtMobile]” style=”width:80%” id=”txtHomeaddr” name=”homeaddr” type=”text” class=”txt03″ /></td></tr>

<tr><td>备注:</td><td colspan=”3″> <input type=”text” style=”width:80%” class=”txt03″ id=”txtRemark”></textarea></td></tr>

<tr><td>&nbsp;</td><td colspan=”3″><input id=”Checkbox1″ type=”checkbox” /><label>超级管理员</label>&nbsp;&nbsp;<input id=”Checkbox2″ type=”checkbox” /><label>禁用</label></td></tr>

</table

</body>

</html>

VistaGadgetonMobile?没错,你没有看错!

随着Vista的发布以及CSDN和微软联合举办的Vista Gadget开发大赛的推动,越来越多的人意识到了Vista Gadget这个有意思的小玩意儿。但是,接着就有人提出来,既然Vista Gadget由HTML + Javascript开发,而Windows Mobile系统本身就内置了Pocket IE,它对Javascript也是支持的。那么有没有可能将Vista Gadget移植到Mobile设备上呢?

答案是可以的,微软已经在on10.net上放出了在Windows Mobile设备上运行Vista Gadget的演示。在Windows Mobile设备上它利用了一个Host程序来加载这些Vista Gadget,虽然目前的界面看起来还比较简陋,但是已经让人激动不已了。不过相信如果能够将这个Gadget的宿主程序做成屏幕的插件形式那么效果将会更加好。

视频下载链接:http://download.microsoft.com/download/5/f/d/5fd96394-17ec-4601-b9c5-24bc12c15ecf/VistaonWM2_2MB_on10.wmv

jquery弹出框

//script

<script type=”text/javascript” src=”/eitp/scripts/jquery/jquery-1.3.2.js”></script>

<script type=”text/javascript” src=”<s:url value=’/dwr/interface/ResourcesDataManager.js’ />”></script>

<script type=”text/javascript” src=”<s:url value=’/dwr/engine.js’/>”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(“#personInfoDiv”).dialog({

bgiframe: true,

autoOpen: false,

height: 300,

width: 450,

draggable: false,

resizable: false,

buttons: {

‘<s:i18n name=”ApplicationResoures_zh.properties”><s:text name=”submit” /></s:i18n>’: function() {

$(this).dialog(‘close’);

}

},

close: function() {

}

})

})

function showPerson(cardId,roleId)

{

var callBack=function(searchT){

$(‘#name’).html(searchT.key);

$(‘#img’).attr(“src”,”/eitp/”+searchT.value);

$(‘#phone’).html(searchT.key1);

$(‘#mobile’).html(searchT.value1);

$(‘#email’).html(searchT.value2);

$(‘#sentMessageA’).attr(“href”,’/eitp/student/psychology/messageAccept_toCreateAddVisit.html cardId=’+cardId+’&roleId=’+roleId);

$(‘#personInfoDiv’).dialog(‘open’);

}

ResourcesDataManager.getPersonInfoByCardId(cardId,roleId,callBack);

}

</script>

//div隐藏域

<div style=” width: 730px; font-size: 12px;color:#ff0000; margin: 0 auto; text-align:left;display: none;” id=”personInfoDiv” title=”<fmt:message key=’perent.infoCard’ />”>

      <table class=”thispage” border=”0″ style=” width: 180px; font-size: 12px; color:#333;” cellspacing=”0″ cellpadding=”0″>

        <tr>

<td colspan=”2″><label id=”name” style=”font-weight:bold”/></td>

        </tr>

        <tr>

          <td style=”width: 35px;”><fmt:message key=”user.phoneNumber”/>:</td>

          <td><label id=”phone”/></td>

        </tr>

        <tr>

          <td><fmt:message key=”student.item.stuMobileOne”/>:</td>

          <td><label id=”mobile”/></td>

        </tr>

        <tr>

          <td>EMAIL:</td>

          <td><label id=”email”/></td>

        </tr>

      </table>

    <div class=”pinglun_link”><a class=”this” href=”#” id=”sentMessageA”><fmt:message key=”search.sentMessage”/></a></div>

</div>

//示例2

$(function() {

$(“#dialog”).dialog({

bgiframe: true,

autoOpen: false,

width:350,

//height: 300,

modal: true,

resizable: false,

buttons: {

‘<s:text name=”reset” />’: function() {

$(this).dialog(‘close’);

},

‘<s:text name=”submit” />’: function() {

var bValid = true;

if (bValid) {

//获取选中checkbox的名字与 ID

var boxForName = document.getElementsByName(“option”);

//var checkArr = new Array();

var chec=””;

var show=””;

for(var i=0;i<boxForName.length;i++){

if(boxForName[i].checked){

if(boxForName[i].value!=’undefined’){

//checkArr.push(boxForName[i].value);

chec+= boxForName[i].value.toString().split(‘,’)[1];

show += boxForName[i].value.toString().split(‘,’)[0]+”,”;

}

}

}

document.getElementById(“people”).innerHTML=show;

document.getElementById(“acceptId”).value = chec;

//showPeople.choosePeople(function (qb){

//alert(222);

//});

//document.addFavCategory.submit();

$(this).dialog(‘close’);

}

}

},

close: function() {

}

});

$(‘#addFavCategory’).click(function() {

$(‘#dialog’).dialog(‘open’);

});

});

codeigniter操作xml

This Simplexml class provides an alternative implementation of the
SimpleXML API that works under PHP 4, so if you have an application
that is running under PHP4 environment this is really helpful for you.

 

The original class was created by Taha Paksu of http://www.phpclasses.org
and it was modified by Chris Brainard so that it would work with codeigniter.

 

Lets take a look at the code.

 

< php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Simplexml{

	var $result = array();
	var $ignore_level = 0;
	var $skip_empty_values = false;
	var $php_errormsg;
	var $evalCode="";

        function xml_parse($data){
                $php_errormsg="";
		$this->result="";
		$this->evalCode="";
		$values="";
            	$encoding = 'UTF-8';
		$parser = xml_parser_create($encoding);
		xml_parser_set_option($parser, XML_OPTION_CASE_FOLDING, 0);
		xml_parser_set_option($parser, XML_OPTION_SKIP_WHITE, 1);
		$ok = xml_parse_into_struct($parser, $data, $values);
		if (!$ok) {
			$errmsg = sprintf("XML parse error %d '%s' at line %d, column %d (byte index %d)",
			xml_get_error_code($parser),
			xml_error_string(xml_get_error_code($parser)),
			xml_get_current_line_number($parser),
			xml_get_current_column_number($parser),
			xml_get_current_byte_index($parser));
		}

		xml_parser_free($parser);
		return $this->xml_reorganize($values);
        }

	function xml_reorganize($array)
	{

		$count = count($array);
		$repeat = $this->xml_tags($array);
		$repeatedone = false;
		$tags = array();
		$k = 0;
		for ($i = 0; $i < $count; $i++) {
			switch ($array[$i]['type']) {
				case 'open':
					array_push($tags, $array[$i]['tag']);
					if ($i > 0 && ($array[$i]['tag'] == $array[$i-1]['tag']) && ($array[$i-1]['type'] == 'close'))
					$k++;
					if (isset($array[$i]['value']) && ($array[$i]['value'] || !$this->skip_empty_values)) {
						array_push($tags, '@content');
						$this->array_insert(count($tags), $tags, $array[$i]['value'], "open");
						array_pop($tags);
					}

					if (in_array($array[$i]['tag'] . $array[$i]['level'], $repeat)) {
						if (($repeatedone == $array[$i]['tag'] . $array[$i]['level']) && ($repeatedone)) {
							array_push($tags, strval($k++));
						} else {
							$repeatedone = $array[$i]['tag'] . $array[$i]['level'];
							array_push($tags, strval($k));
						}
					}

					if (isset($array[$i]['attributes']) && $array[$i]['attributes'] && $array[$i]['level'] != $this->ignore_level) {
						array_push($tags, '@attributes');
						foreach ($array[$i]['attributes'] as $attrkey => $attr) {
							array_push($tags, $attrkey);
							$this->array_insert(count($tags), $tags, $attr, "open");
							array_pop($tags);
						}
						array_pop($tags);
					}
					break;

				case 'close':
					array_pop($tags);
					if (in_array($array[$i]['tag'] . $array[$i]['level'], $repeat)) {
						if ($repeatedone == $array[$i]['tag'] . $array[$i]['level']) {
							array_pop($tags);
						} else {
							$repeatedone = $array[$i + 1]['tag'] . $array[$i + 1]['level'];
							array_pop($tags);
						}
					}
					break;

				case 'complete':
					array_push($tags, $array[$i]['tag']);
					if (in_array($array[$i]['tag'] . $array[$i]['level'], $repeat)) {
						if ($repeatedone == $array[$i]['tag'] . $array[$i]['level'] && $repeatedone) {
							array_push($tags, strval($k));
						} else {
							$repeatedone = $array[$i]['tag'] . $array[$i]['level'];
							array_push($tags, strval($k));
						}
					}

					if (isset($array[$i]['value']) && ($array[$i]['value'] || !$this->skip_empty_values)) {
						if (isset($array[$i]['attributes']) && $array[$i]['attributes']) {
							array_push($tags, '@content');
							$this->array_insert(count($tags), $tags, $array[$i]['value'], "complete");
							array_pop($tags);
						} else {
							$this->array_insert(count($tags), $tags, $array[$i]['value'], "complete");
						}
					}

					if (isset($array[$i]['attributes']) && $array[$i]['attributes']) {
						array_push($tags, '@attributes');
						foreach ($array[$i]['attributes'] as $attrkey => $attr) {
							array_push($tags, $attrkey);
							$this->array_insert(count($tags), $tags, $attr, "complete");
							array_pop($tags);
						}
						array_pop($tags);
					}

					if (in_array($array[$i]['tag'] . $array[$i]['level'], $repeat)) {
						array_pop($tags);
						$k++;
					}

					array_pop($tags);
					break;
			}
		}
		eval($this->evalCode);
		$last = $this->array_reindex($this->result);
		return $last;
	}	

	function array_insert($level, $tags, $value, $type)
	{
		$temp = '';
		for ($c = $this->ignore_level + 1; $c < $level + 1; $c++) {
			if (isset($tags[$c]) && (is_numeric(trim($tags[$c])) || trim($tags[$c]))) {
				if (is_numeric($tags[$c])) {
					$temp .= '[' . $tags[$c] . ']';
				} else {
					$temp .= '["' . $tags[$c] . '"]';
				}
			}
		}
		$this->evalCode .= '$this->result' . $temp . "=\"" . addslashes($value) . "\";//(" . $type . ")\n";
		#echo $code. "\n";
	}

	/**
	 * Define the repeated tags in XML file so we can set an index
	 *
	 * @param array $array
	 * @return array
	 */
	function xml_tags($array)
	{	$repeats_temp = array();
	$repeats_count = array();
	$repeats = array();

	if (is_array($array)) {
		$n = count($array) - 1;
		for ($i = 0; $i < $n; $i++) {
			$idn = $array[$i]['tag'].$array[$i]['level'];
			if(in_array($idn,$repeats_temp)){
				$repeats_count[array_search($idn,$repeats_temp)]+=1;
			}else{
				array_push($repeats_temp,$idn);
				$repeats_count[array_search($idn,$repeats_temp)]=1;
			}
		}
	}
	$n = count($repeats_count);
	for($i=0;$i<$n;$i++){
		if($repeats_count[$i]>1){
			array_push($repeats,$repeats_temp[$i]);
		}
	}
	unset($repeats_temp);
	unset($repeats_count);
	return array_unique($repeats);
	}

	/**
	 * Converts Array Variable to Object Variable
	 *
	 * @param array $arg_array
	 * @return $tmp
	 */
	function array2object ($arg_array)
	{

		if (is_array($arg_array)) {
			$keys = array_keys($arg_array);
			if(!is_numeric($keys[0])) $tmp = new Xml;
			foreach ($keys as $key) {
				if (is_numeric($key)) $has_number = true;
				if (is_string($key)) $has_string = true;
			}
			if (isset($has_number) and !isset($has_string)) {
				foreach ($arg_array as $key => $value) {
					$tmp[] = $this->array2object($value);
				}
			} elseif (isset($has_string)) {
				foreach ($arg_array as $key => $value) {
					if (is_string($key))
					$tmp->$key = $this->array2object($value);
				}
			}
		} elseif (is_object($arg_array)) {
			foreach ($arg_array as $key => $value) {
				if (is_array($value) or is_object($value))
				$tmp->$key = $this->array2object($value);
				else
				$tmp->$key = $value;
			}
		} else {
			$tmp = $arg_array;
		}
		return $tmp; //return the object
	}

	/**
	 * Reindexes the whole array with ascending numbers
	 *
	 * @param array $array
	 * @return array
	 */
	function array_reindex($array)
	{
		if (is_array($array)) {
			if(count($array) == 1 && $array[0]){
				return $this->array_reindex($array[0]);
			}else{
				foreach($array as $keys => $items) {
					if (is_array($items)) {
						if (is_numeric($keys)) {
							$array[$keys] = $this->array_reindex($items);
						} else {
							$array[$keys] = $this->array_reindex(array_merge(array(), $items));
						}
					}
				}
			}
		}

		return $array;
	}

}

 

In this article we don’t need to understand what is in the code above. What is my aim is to show you how to use it.

 

Supposing you have an xml format like below, and you need it to present as a tabular data in an html page.

 

< xml version="1.0" encoding="UTF-8" standalone="yes" >
<products xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

	<item>
		<id>1</id>
		<name>iPhone</name>
		<category>Mobile</category>
		<price>300</price>
	</item>

	<item>
		<id>2</id>
		<name>iMac</name>
		<category>Desktop Computers</category>
		<price>2500</price>
	</item>

	<item>
		<id>3</id>
		<name>MacBook Pro</name>
		<category>Mobile PC</category>
		<price>2000</price>
	</item>

	<item>
		<id>4</id>
		<name>iTouch</name>
		<category>Gadgets</category>
		<price>150</price>
	</item>

	<item>
		<id>5</id>
		<name>Wii</name>
		<category>Gaming</category>
		<price>1250</price>
	</item>

	<item>
		<id>6</id>
		<name>Time Capsule</name>
		<category>Acessories</category>
		<price>1000</price>
	</item>

	<item>
		<id>7</id>
		<name>Apple TV</name>
		<category>Gadgets</category>
		<price>800</price>
	</item>

</products>

 

Lets start by creating our controller, to make it easier lets make use
of the default controller in fresh CI installation which is the welcome
controller. Now open you welcome controller and in you index function
populate the code below.

 

	function index()
	{
		//load the parser library
		$this->load->library('parser');

               $data['title'] = 'Parsing XML using Simplexml class of CodeIgniter';

               $data['products'] = $this->_getXML('myxml');

	       $this->parser->parse('table_view', $data);
	}

 

In this function we load the parser library, for those who dont know
what a parser library is, its a simple templating engine of
codeIgniter. Im using this almost always for me to get rid if the php
tag in my view. Next we have a varialble title
, and a variable products
which calls the _getXML
function with a string parameter myxml
, we use this as reference of the filename for our XML file to be parse. Then load our table_view
.

 

Lets add the _getXML
function to our controller. Add this code in your welcome controller.

 

  function _getXML($fname)
    {

                $filename = $fname.'.xml';
                $xmlfile="./xml/".$filename;
                $xmlRaw = file_get_contents($xmlfile);

                $this->load->library('simplexml');
                $xmlData = $this->simplexml->xml_parse($xmlRaw);

                foreach($xmlData['item'] as $row)
                {

			$result .= '<tr>';
			$result .= '<td>'.$row['id'].'</td>';
			$result .= '<td>'.$row['name'].'</td>';
			$result .= '<td>'.$row['category'].'</td>';
			$result .= '<td>$ '.$row['price'].'</td>';
			$result .= '</tr>';

                }
                 return $result;
        }

 

This assume that the file location of your xml file is in the root of your CI installation an inside the xml
folder. Then using the file_get_contents()
function we load the xml data to $xmlRaw
varialble. We loaded the simple XML library and then we populate it to the table element using foreach()
function.

Now you only need to add a very little code in your view file.

 

<table cellpadding="0" cellspacing="0">
	<thead>
	<th>
			<td>PRODUCT ID</td>
			<td>PRODUCT NAME</td>
			<td>CATEGORY</td>
			<td>PRICE</td>
	</th>
	</thead>

	<tbody>
		{products}
	</tbody>

</table>

 

Thats it!. Adding some quick css styling and a jQuery for table row stripe effect. You get something like this.

 

 

Adding a quick table stripe effect.

Download and include the jQuery library file in your view.

 

<script type="text/javascript" src="public/js/jquery.js"></script>

 

Then add this line before the tag in your view file.

 

<script type="text/javascript">
	$(document).ready(function(){

		$("table tr:nth-child(even)").addClass("even");

	});
</script>

 

And you must have a style like this in your css file.

 

table tr.even td{
    background: #cdded6;
}

 

Were done. Thanks for reading.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Validator.js很好用的客户端表单验证

/*************************************************
Validator v1.01
wfsr@cunite.com
http://www.cunite.com
*************************************************/
Validator = {
Require : /.+/,
Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
Phone : /^((\(\d{3}\))|(\d{3}\-)) (\(0\d{2,3}\)|0\d{2,3}-) [1-9]\d{6,7}$/,
//Mobile : /^((\(\d{3}\))|(\d{3}\-)) (\(0\d{2,3}\)|0\d{2,3}-) [1-9]\d{6,7}$/,
//Mobile : /^((\(\d{3}\))|(\d{3}\-)) 13|((\(\d{3}\))|(\d{3}\-)) 15\d{9}$/,
Mobile : /^\d{8,12}$/,
Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\ %\-&_~`@[\]\’:+!]*([^<>\”\”])*$/,
IdCard : /^\d{15}(\d{2}[A-Za-z0-9]) $/,
Currency : /^\d+(\.\d+) $/,
Number : /^\d+$/,
Zip : /^[1-9]\d{5}$/,
QQ : /^[1-9]\d{4,10}$/,
Integer : /^[-\+] \d+$/,
Double : /^[-\+] \d+(\.\d+) $/,
English : /^[A-Za-z]+$/,
Chinese : /^[\u0391-\uFFE5]+$/,
UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\ \\\/\’\”]*)|.{0,5})$|\s/,
IsSafe : function(str){return !this.UnSafe.test(str);},
SafeString : “this.IsSafe(value)”,
Limit : “this.limit(value.length,getAttribute(‘min’), getAttribute(‘max’))”,
LimitB : “this.limit(this.LenB(value), getAttribute(‘min’), getAttribute(‘max’))”,
Date : “this.IsDate(value, getAttribute(‘min’), getAttribute(‘format’))”,
Repeat : “value == document.getElementsByName(getAttribute(‘to’))[0].value”,
Range : “getAttribute(‘min’) < value && value < getAttribute(‘max’)”,
Compare : “this.compare(value,getAttribute(‘operator’),getAttribute(‘to’))”,
Custom : “this.Exec(value, getAttribute(‘regexp’))”,
Group : “this.MustChecked(getAttribute(‘name’), getAttribute(‘min’), getAttribute(‘max’))”,
ErrorItem : [document.forms[0]],
ErrorMessage : [“以下原因导致提交失败:\t\t\t\t”],
Validate : function(theForm, mode){
var obj = theForm || event.srcElement;
var count = obj.elements.length;
this.ErrorMessage.length = 1;
this.ErrorItem.length = 1;
this.ErrorItem[0] = obj;
for(var i=0;i<count;i++){
with(obj.elements[i]){
var _dataType = getAttribute(“dataType”);
if(typeof(_dataType) == “object” || typeof(this[_dataType]) == “undefined”) continue;
this.ClearState(obj.elements[i]);
if(getAttribute(“require”) == “false” && value == “”) continue;
switch(_dataType){
case “Date” :
case “Repeat” :
case “Range” :
case “Compare” :
case “Custom” :
case “Group” :
case “Limit” :
case “LimitB” :
case “SafeString” :
if(!eval(this[_dataType])) {
this.AddError(i, getAttribute(“msg”));
}
break;
default :
if(!this[_dataType].test(value)){
this.AddError(i, getAttribute(“msg”));
}
break;
}
}
}
if(this.ErrorMessage.length > 1){
mode = mode || 1;
var errCount = this.ErrorItem.length;
switch(mode){
case 2 :
for(var i=1;i<errCount;i++)
this.ErrorItem[i].style.color = “red”;
case 1 :
alert(this.ErrorMessage.join(“\n”));
this.ErrorItem[1].focus();
break;
case 3 :
for(var i=1;i<errCount;i++){
try{
var span = document.createElement(“SPAN”);
span.id = “__ErrorMessagePanel”;
span.style.color = “red”;
this.ErrorItem[i].parentNode.appendChild(span);
span.innerHTML = this.ErrorMessage[i].replace(/\d+:/,”*”);
}
catch(e){alert(e.description);}
}
this.ErrorItem[1].focus();
break;
default :
alert(this.ErrorMessage.join(“\n”));
break;
}
return false;
}
return true;
},
limit : function(len,min, max){
min = min || 0;
max = max || Number.MAX_VALUE;
return min <= len && len <= max;
},
LenB : function(str){
return str.replace(/[^\x00-\xff]/g,”**”).length;
},
ClearState : function(elem){
with(elem){
if(style.color == “red”)
style.color = “”;
var lastNode = parentNode.childNodes[parentNode.childNodes.length-1];
if(lastNode.id == “__ErrorMessagePanel”)
parentNode.removeChild(lastNode);
}
},
AddError : function(index, str){
this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index];
this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + “:” + str;
},
Exec : function(op, reg){
return new RegExp(reg,”g”).test(op);
},
compare : function(op1,operator,op2){
switch (operator) {
case “NotEqual”:
return (op1 != op2);
case “GreaterThan”:
return (op1 > op2);
case “GreaterThanEqual”:
return (op1 >= op2);
case “LessThan”:
return (op1 < op2);
case “LessThanEqual”:
return (op1 <= op2);
default:
return (op1 == op2);
}
},
MustChecked : function(name, min, max){
var groups = document.getElementsByName(name);
var hasChecked = 0;
min = min || 1;
max = max || groups.length;
for(var i=groups.length-1;i>=0;i–)
if(groups[i].checked) hasChecked++;
return min <= hasChecked && hasChecked <= max;
},
IsDate : function(op, formatString){
formatString = formatString || “ymd”;
var m, year, month, day;
switch(formatString){
case “ymd” :
m = op.match(new RegExp(“^((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})$“));
if(m == null ) return false;
day = m[6];
month = m[5]–;
year = (m[2].length == 4)   m[2] : GetFullYear(parseInt(m[3], 10));
break;
case “dmy” :
m = op.match(new RegExp(“^(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))$“));
if(m == null ) return false;
day = m[1];
month = m[3]–;
year = (m[5].length == 4)   m[5] : GetFullYear(parseInt(m[6], 10));
break;
default :
break;
}
if(!parseInt(month)) return false;
month = month==12  0:month;
var date = new Date(year, month, day);
return (typeof(date) == “object” && year == date.getFullYear() && month == date.getMonth() && day == date.getDate());
function GetFullYear(y){return ((y<30   “20” : “19”) + y)|0;}
}
}

 

使用:

 

语法dataType=”Require | Chinese | English | Number | Integer | Double | Email | Url | Phone | Mobile | Currency | Zip | IdCard | QQ | Date | SafeString | Repeat | Compare | Range | Limit | LimitB | Group | Custom
类型字符串。必选。
说明:用于设定表单项的输入数据验证类型。
选值说明
可选值 验证功能
Require 必填项
Chinese 中文
English 英文
Number 数字
Integer
整数
Double
实数
Email
Email地址格式
Url
基于HTTP协议的网址格式
Phone
电话号码格式
Mobile
手机号码格式
Currency 货币格式
Zip
邮政编码
IdCard
身份证号码
QQ
QQ号码
Date 日期
SafeString 安全密码
Repeat
重复输入
Compare
关系比较
Range
输入范围
Limit
限制输入长度
LimitB
限制输入的字节长度
Group 验证单/多选按钮组
Custom 自定义正则表达式验证

 

 

语法max=”int
类型:字符串。在dataType属性值为Range时必选,为Group且待验证项是多选按钮组时可选(此时默认值为1),为为Limit/LimitB时可选(此时默认值为1.7976931348623157e+308,即Number.MAX_VALUE的值)。
说明:当daType属性值为Range时,用于判断输入是否在minmax的属性值间;当dataType属性值为Group,且待验证项是多选按钮组时,用于设定多选按钮组的选中个数,判断选中个数是否在[min, max]区间;当daType属性值为Limit时,用于验证输入的字符数是否在[min, max]区间;当daType属性值为LimitB时,用于验证输入字符的字节数是否在[min, max]区间。

 

 

语法min=”int
类型:字符串。在dataType属性值为Range时必选,为Group且待验证项是多选按钮组时可选(此时默认值为1),为为Limit/LimitB时可选(此时默认值为0)。
说明:当daType属性值为Range时,用于判断输入是否在minmax的属性值间;当dataType属性值为Group,且待验证项是多选按钮组时,用于设定多选按钮组的选中个数,判断选中个数是否在[min, max]区间;当daType属性值为Limit时,用于验证输入的字符数是否在[min, max]区间;当daType属性值为LimitB时,用于验证输入字符的字节数是否在[min, max]区间。

 

语法 msg=”string
类型:字符串。必选。
说明:在验证失败时要提示的出错信息。

 

语法operator=”NotEqual | GreaterThan | GreaterThanEqual | LessThan | LessThanEqual | Equal
类型:字符串。在dataType属性值为Compare时可选(默认值为Equal)。
说明:参考to属性。
各选值所对应的关系操作符

可选值 意义说明
NotEqual
不等于 !=
GreaterThan 大于 >
GreaterThanEqual
大于等于 >=
LessThan 小于 <
LessThanEqual 小于等于 <=
Equal 等于 =

 

语法require=”true | false
类型:字符串。可选。
说明:用于设定表单项的验证方式。当值为false时表单项不是必填项,但当有填写时,仍然要执行dataType属性所设定的验证方法,值为true或任何非false字符时可省略此属性。

 

语法to=”sting | int
类型:字符串。当dataType值为RepeatCompare时必选。
说明:当dataType值为Repeat时,to的值为某表单项的name属性值,用于设定当前表单项的值是否与目标表单项的值一致;当dataType的值为Compare时,to的选值类型为实数,用于判断当前表单项的输入与to的值是否符合operator属性值所指定的关系。

 

语法format=”ymd | dmy
类型:字符串。在dataType属性值为Date时可选(默认值为ymd)。
说明:用于验证输入是否为符合format属性值所指定格式的日期。
符合规则的输入示例 : 2004-11-232004/11/2304.11.2323-11-2004
注意:当输入的年份为2位时,如果数值小于30,将使年份看作处于21世纪,否则为20世纪。

 

语法regexp=”object
类型:字符串。在dataType属性值为Custom时必选。
说明:用于验证输入是否符合regexp属性所指定的正则表达式。

示例:

 

 

引用:http://www.phpchina.com/ 1133/action_viewspace_itemid_3631.html

http://www.phpchina.com/ 8133/action_viewspace_itemid_3214.html

 

示例是html代码,不会上传,copy过来变成页面了,用帖子回复又可以了。

 

元字符:

/b 代表着单词的开头或结尾,也就是单词的分界处.如果要精确地查找hi这个单词的话,我们应该使用/bhi/b.

.是另一个元字符,匹配除了换行符以外的任意字符,*同样是元字符,它指定*前边的内容可以重复任意次以使整个表达式得到匹配。

.*连在一起就意味着任意数量的不包含换行的字符。

/d是一个新的元字符,匹配任意的数字,0/d/d-/d/d/d/d/d/d/d/d也就是中国的电话号码.为了避免那么多烦人的重复,我们也可以这样写这个表达式:0/d{2}-/d{8}。

/s匹配任意的空白符,包括空格,制表符(Tab),换行符,中文全角空格等。/w匹配字母或数字或下划线或汉字。

/b/w{6}/b 匹配刚好6个字母/数字的单词。

字符转义:使用/来取消这些字符的特殊意义。因此,你应该使用/.和/*。当然,要查找/本身,你也得用//。

  代码     说明
   .  匹配除换行符以外的任意字符
  /w  匹配字母或数字或下划线或汉字
  /s  匹配任意的空白符
  /d  匹配数字
  /b  匹配单词的开始或结束
  ^   匹配字符串的开始
  $   匹配字符串的结束

重复:
常用的限定符
代码/语法  说明
   *  重复零次或更多次
   +  重复一次或更多次
      重复零次或一次
  {n} 重复n次
{n,} 重复n次或更多次
{n,m} 重复n到m次

要想查找数字,字母或数字,你只需要在中括号里列出它们就行了,像[aeiou]就匹配任何一个元音字母,[. !]匹配标点符号(.或 或!)

反义:
常用的反义代码
代码/语法   说明
   /W   匹配任意不是字母,数字,下划线,汉字的字符
   /S   匹配任意不是空白符的字符
   /D   匹配任意非数字的字符
   /B   匹配不是单词开头或结束的位置
[^x]   匹配除了x以外的任意字符
      [^aeiou]   匹配除了aeiou这几个字母以外的任意字符

替换:
   正则表达式里的替换指的是有几种规则,如果满足其中任意一种规则都应该当成匹配,具体方法是用|把不同的规则分隔开。
   0/d{2}-/d{8}|0/d{3}-/d{7}这个表达式能匹配两种以连字号分隔的电话号码:一种是三位区号,8位本地号(如010-12345678),一种是4位区号,7位本地号(0376-2233445)。
   /(0/d{2}/)[- ] /d{8}|0/d{2}[- ] /d{8}这个表达式匹配3位区号的电话号码,其中区号可以用小括号括起来,也可以不用,区号与本地号间可以用连字号或空格间隔,也可以没有间隔。你可以试试用替换|把这个表达式扩展成也支持4位区号的。
   /d{5}-/d{4}|/d{5}这个表达式用于匹配美国的邮政编码。美国邮编的规则是5位数字,或者用连字号间隔的9位数字。之所以要给出这个例子是因为它能说明一个问题:使用替换时,顺序是很重要的。如果你把它改成/d{5}|/d{5}-/d{4}的话,那么就只会匹配5位的邮编(以及9位邮编的前5位)。原因是匹配替换时,将会从左到右地测试每个分枝条件,如果满足了某个分枝的话,就不会去管其它的替换条件了。

分组:

如果想要重复一个字符串又该怎么办?你可以用小括号来指定子表达式(也叫做分组),然后你就可以指定这个子表达式的重复次数了。
     (/d{1,3}/.){3}/d{1,3}是一个简单的IP地址匹配表达式。要理解这个表达式,请按下列顺序分析它:/d{1,3}匹配1到3位的数字,(/d{1,3}/.}{3}匹配三位数字加上一个英文句号(这个整体也就是这个分组)重复3次,最后再加上一个一到三位的数字(/d{1,3})。不幸的是,它也将匹配256.300.888.999这种不可能存在的IP地址(IP地址中每个数字都不能大于255)。如果能使用算术比较的话,或许能简单地解决这个问题,但是正则表达式中并不提供关于数学的任何功能,所以只能使用冗长的分组,选择,字符类来描述一个正确的IP地址:((2[0-4] /d|25[0-5]|[01] /d/d )/.){3}(2[0-4]/d|25[0-5]|[01] /d/d )。

后向引用:

后向引用用于重复搜索前面某个分组匹配的文本。例如,/1代表分组1匹配的文本。难以理解?请看示例:
/b(/w+)/b/s+/1/b可以用来匹配重复的单词,像go go, kitty kitty。首先是一个单词,也就是单词开始处和结束处之间的多于一个的字母或数字(/b(/w+)/b),然后是1个或几个空白符(/s+,最后是前面匹配的那个单词(/1)。

懒惰限定符
*  重复任意次,但尽可能少重复
+  重复1次或更多次,但尽可能少重复
   重复0次或1次,但尽可能少重复
{n,m}  重复n到m次,但尽可能少重复
{n,}  重复n次以上,但尽可能少重复

位置指定:

接下来的四个用于查找在某些内容(但并不包括这些内容)之前或之后的东西,也就是说它们用于指定一个位置,就像/b,^,$那样,因此它们也被称为零宽断言。最好还是拿例子来说明吧:

( =exp)也叫零宽先行断言,它匹配文本中的某些位置,这些位置的后面能匹配给定的后缀exp。比如/b/w+( =ing/b),匹配以 ing结尾的单词的前面部分(除了ing以外的部分),如果在查找I’m singing while you’re dancing.时,它会匹配sing和danc。

( <=exp)也叫零宽后行断言,它匹配文本中的某些位置,这些位置的前面能给定的前缀匹配exp。比如( <=/bre)/w+/b会匹配以re开头的单词的后半部分(除了re以外的部分),例如在查找reading a book时,它匹配ading。

假如你想要给一个很长的数字中每三位间加一个逗号(当然是从右边加起了),你可以这样查找需要在前面和里面添加逗号的部分:(( <=/d)/d{3})*/b。请仔细分析这个表达式,它可能不像你第一眼看出来的那么简单。

下面这个例子同时使用了前缀和后缀:( <=/s)/d+( =/s)匹配以空白符间隔的数字(再次强调,不包括这些空白符)。

负向位置指定:

前面我们提到过怎么查找不是某个字符或不在某个字符类里的字符的方法(反义)。但是如果我们只是想要确保某个字符没有出现,但并不想去匹配它时怎么办?例如,如果我们想查找这样的单词–它里面出现了字母q,但是q后面跟的不是字母u,我们可以尝试这样:

/b/w*q[^u]/w*/b匹配包含后面不是字母u的字母q的单词。但是如果多做测试(或者你思维足够敏锐,直接就观察出来了),你会发现,如果q出现在单词的结尾的话,像Iraq,Benq,这个表达式就会出错。这是因为[^u]总是匹配一个字符,所以如果q是单词的最后一个字符的话,后面的 [^u]将会匹配q后面的单词分隔符(可能是空格,或者是句号或其它的什么),后面的/w+/b将会匹配下一个单词,于是/b/w*q[^u]/w*/b 就能匹配整个Iraq fighting。负向位置指定能解决这样的问题,因为它只匹配一个位置,并不消费任何字符。现在,我们可以这样来解决这个问题:/b/w*q( !u) /w*/b。

零宽负向先行断言( !exp),只会匹配后缀exp不存在的位置。/d{3}( !/d)匹配三位数字,而且这三位数字的后面不能是数字。

同理,我们可以用( <!exp),零宽负向后行断言来查找前缀exp不存在的位置:( <![a-z])/d{7}匹配前面不是小写字母的七位数字(实验时发现错误?注意你的“区分大小写”先项是否选中)。

一个更复杂的例子:( <=<(/w+)>).*( =<///1>)匹配不包含属性的简单HTML标签内里的内容。(< (/w+)>)指定了这样的前缀:被尖括号括起来的单词(比如可能是<b>),然后是.*(任意的字符串),最后是一个后缀( =<///1>)。注意后缀里的//,它用到了前面提过的字符转义;/1则是一个反向引用,引用的正是捕获的第一组,前面的(/w +)匹配的内容,这样如果前缀实际上是<b>的话,后缀就是</b>了。整个表达式匹配的是<b>和< /b>之间的内容(再次提醒,不包括前缀和后缀本身)。

注释:
小括号的另一种用途是能过语法( #comment)来包含注释。例如:2[0-4]/d( #200-249)|25[0-5]( #250-255)|[01] /d/d ( #0-199)。

要包含注释的话,最好是启用“忽略模式里的空白符”选项,这样在编写表达式时能任意的添加空格,Tab,换行,而实际使用时这些都将被忽略。启用这个选项后,在#后面到这一行结束的所有文本都将被当成注释忽略掉。

例如,我们可以前面的一个表达式写成这样:

      ( <=    # 查找前缀,但不包含它
      <(/w+)> # 查找尖括号括起来的字母或数字(标签)
      )       # 前缀结束
      .*      # 匹配任意文本
      ( =     # 查找后缀,但不包含它
      <///1>  # 查找尖括号括起来的内容:前面是一个”/”,后面是先前捕获的标签
      )       # 后缀结束

贪婪与懒惰:
当正则表达式中包含能接受重复的限定符(指定数量的代码,例如*, {5,12}等)时,通常的行为是(在使整个表达式能得到匹配的前提下)匹配尽可能多的字符。考虑这个表达式:a.*b,它将会匹配最长的以a开始,以b 结束的字符串。如果用它来搜索aabab的话,它会匹配整个字符串aabab。这被称为贪婪匹配。

有时,我们更需要懒惰匹配,也就是匹配尽可能少的字符。前面给出的限定符都可以被转化为懒惰匹配模式,只要在它后面加上一个问号 。这样.* 就意味着匹配任意数量的重复,但是在能使整个匹配成功的前提下使用最少的重复。现在看看懒惰版的例子吧:

a.* b匹配最短的,以a开始,以b结束的字符串。如果把它应用于aabab的话,它会匹配aab和ab(为什么第一个匹配是aab而不是ab?简单地说,最先开始的区配最有最大的优先权  The Match That Begins Earliest Wins)。

表5.懒惰限定符 *  重复任意次,但尽可能少重复
+  重复1次或更多次,但尽可能少重复
   重复0次或1次,但尽可能少重复
{n,m}  重复n到m次,但尽可能少重复
{n,}  重复n次以上,但尽可能少重复

——————————————————-

下面是一些常用的正则表达式:

匹配中文字符的正则表达式: [/u4e00-/u9fa5]
评注:匹配中文还真是个头疼的事,有了这个表达式就好办了

匹配双字节字符(包括汉字在内):[^/x00-/xff]
评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1)

匹配空白行的正则表达式:/n/s*/r
评注:可以用来删除空白行

匹配HTML标记的正则表达式:<(/S* )[^>]*>.* <//1>|<.*  />
评注:网上流传的版本太糟糕,上面这个也仅仅能匹配部分,对于复杂的嵌套标记依旧无能为力

匹配首尾空白字符的正则表达式:^/s*|/s*$
评注:可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等),非常有用的表达式

匹配Email地址的正则表达式:/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*
评注:表单验证时很实用

匹配网址URL的正则表达式:[a-zA-z]+://[^/s]*
评注:网上流传的版本功能很有限,上面这个基本可以满足需求

匹配帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线):^[a-zA-Z][a-zA-Z0-9_]{4,15}$
评注:表单验证时很实用

匹配国内电话号码:/d{3}-/d{8}|/d{4}-/d{7}
评注:匹配形式如 0511-4405222 或 021-87888822

匹配腾讯QQ号:[1-9][0-9]{4,}
评注:腾讯QQ号从10000开始

匹配中国邮政编码:[1-9]/d{5}( !/d)
评注:中国邮政编码为6位数字

匹配身份证:/d{15}|/d{18}
评注:中国的身份证为15位或18位

匹配ip地址:/d+/./d+/./d+/./d+
评注:提取ip地址时有用

匹配特定数字:
^[1-9]/d*$    //匹配正整数

 

 

例子:

<!DOCTYPE html PUBLIC “-//w3c//dtd xhtml 1.0 transitional//en” “http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd“>
<html>
<head><title></title>
  
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<meta http-equiv=”Content-Language” content=”gb2312″>  
<script language=”javascript” type=”text/javascript” src=”Validator.js”></script>
</head>
<body>
<title>表单验证类 Validator v1.05</title>
 <style>
 body,td{font:normal 12px Verdana;color:#333333}
 input,textarea,select,td{font:normal 12px Verdana;color:#333333;border:1px solid # 9;background:#ffffff}
 table{border-collapse:collapse;}
 td{padding:3px}
 input{height:20;}
 textarea{width:80%;height:50px;overflow:auto;}
 form{display:inline}
 </style>
 <table align=”center”>
  <form name=”theform” id=”demo” method=”get” onSubmit=”return Validator.Validate(this,2)”>
  <tr>
   <td>身份证号:</td><td><input name=”Card” dataType=”IdCard” msg=”身份证号错误”></td>
  </tr>
    <tr>
   <td>真实姓名:</td><td><input name=”Name” dataType=”Chinese” msg=”真实姓名只允许中文”></td>
  </tr>
  <tr>
   <td>ID:</td><td><input name=”username” dataType=”Username” msg=”ID名不符合规定”></td>
  </tr>
  <tr>
   <td>英文名:</td><td><input name=”Nick” dataType=”English” require=”false” msg=”英文名只允许英文字母”></td>
  </tr>
    <tr>
   <td>主页:</td><td><input name=”Homepage” require=”false” dataType=”Url”   msg=”非法的Url”></td>
  </tr>
  <tr>
   <td>密码:</td><td><input name=”Password” dataType=”SafeString”   msg=”密码不符合安全规则” type=”password”></td>
  </tr>
  <tr>
   <td>重复:</td><td><input name=”Repeat” dataType=”Repeat” to=”Password” msg=”两次输入的密码不一致” type=”password”></td>
  </tr>
  <tr>
   <td>信箱:</td><td><input name=”Email” dataType=”Email” msg=”信箱格式不正确”></td>
  </tr>
    <tr>
   <td>信箱:</td><td><input name=”Email” dataType=”Repeat” to=”Email” msg=”两次输入的信箱不一致”></td>
  </tr>
  <tr>
   <td>QQ:</td><td><input name=”QQ” require=”false” dataType=”QQ” msg=”QQ号码不存在”></td>
  </tr>
    <tr>
   <td>身份证:</td><td><input name=”Card” dataType=”IdCard” msg=”身份证号码不正确”></td>
  </tr>
  <tr>
   <td>年龄:</td><td><input name=”Year” dataType=”Range” msg=”年龄必须在18~28之间” min=”18″ max=”28″></td>
  </tr>
   <tr>
   <td>年龄1:</td><td><input name=”Year1″ require=”false” dataType=”Compare” msg=”年龄必须在18以上” to=”18″ operator=”GreaterThanEqual”></td>
  </tr>
   <tr>
   <td>电话:</td><td><input name=”Phone” require=”false” dataType=”Phone” msg=”电话号码不正确”></td>
  </tr>
   <tr>
   <td>手机:</td><td><input name=”Mobile” require=”false” dataType=”Mobile” msg=”手机号码不正确”></td>
  </tr>
     <tr>
   <td>生日:</td><td><input name=”Birthday” dataType=”Date” format=”ymd” msg=”生日日期不存在”></td>
  </tr>
   <tr>
   <td>邮政编码:</td><td><input name=”Zip” dataType=”Custom” regexp=”^[1-9]\d{5}$” msg=”邮政编码不存在”></td>
  </tr>
  <tr>
   <td>邮政编码:</td><td><input name=”Zip1″ dataType=”Zip” msg=”邮政编码不存在”></td>
  </tr>
  <tr>
   <td>操作系统:</td><td><select name=”Operation” dataType=”Require”  msg=”未选择所用操作系统” ><option value=””>选择您所用的操作系统</option><option value=”Win98″>Win98</option><option value=”Win2k”>Win2k</option><option value=”WinXP”>WinXP</option></select></td>
  </tr>
  <tr>
   <td>所在省份:</td><td>广东<input name=”Province” value=”1″ type=”radio”>陕西<input name=”Province” value=”2″ type=”radio”>浙江<input name=”Province” value=”3″ type=”radio”>江西<input name=”Province” value=”4″ type=”radio” dataType=”Group”  msg=”必须选定一个省份” ></td>
  </tr>
  <tr>
   <td>爱好:</td><td>运动<input name=”Favorite” value=”1″ type=”checkbox”>上网<input name=”Favorite” value=”2″ type=”checkbox”>听音乐<input name=”Favorite” value=”3″ type=”checkbox”>看书<input name=”Favorite” value=”4″ type=”checkbox”” dataType=”Group” min=”2″ max=”3″  msg=”必须选择2~3种爱好”></td>
  </tr>
   <td>自我介绍:</td><td><textarea name=”Description” dataType=”Limit” max=”10″  msg=”自我介绍内容必须在10个字之内”>中文是一个字</textarea></td>
  </tr>
     <td>自传:</td><td><textarea name=”History” dataType=”LimitB” min=”3″ max=”10″  msg=”自传内容必须在[3,10]个字节之内”>中文是两个字节t</textarea></td>
  </tr>
    <tr>
   <td>相片上传:</td><td><input name=”up” dataType=”Filter” msg=”非法的文件格式” type=”file” accept=”jpg, gif, png”></td>
  </tr>
  <tr>
   <td colspan=”2″><input name=”Submit” type=”submit” value=”确定提交”><input onClick=”Validator.Validate(document.getElementById(‘demo’))” value=”检验模式1″ type=”button”><input onClick=”Validator.Validate(document.getElementById(‘demo’),2)” value=”检验模式2″ type=”button”><input onClick=”Validator.Validate(document.getElementById(‘demo’),3)” value=”检验模式3″ type=”button”></td>
  </tr>
  </form>
 </table>
</body>

</html>

正则表达式在javascript中的几个实例

正则表达式在javascript中的几个实例

! 去除字符串两端空格的处理

如果采用传统的方式,就要可能就要采用下面的方式了
//清除左边空格
function js_ltrim(deststr)
{
 if(deststr==null)return “”;
 var pos=0;
 var retStr=new String(deststr);
 if (retStr.lenght==0) return retStr;
 while (retStr.substring(pos,pos+1)==” “) pos++;
 retStr=retStr.substring(pos);
 return(retStr);
}
//清除右边空格
function js_rtrim(deststr)
{
 if(deststr==null)return “”;
 var retStr=new String(deststr);
 var pos=retStr.length;
 if (pos==0) return retStr;
 while (pos && retStr.substring(pos-1,pos)==” ” ) pos–;
 retStr=retStr.substring(0,pos);
 return(retStr);
}
//清除左边和右边空格
function js_trim(deststr)
{
 if(deststr==null)return “”;
 var retStr=new String(deststr);
 var pos=retStr.length;
 if (pos==0) return retStr;
 retStr=js_ltrim(retStr);
 retStr=js_rtrim(retStr);
 return retStr;
}

采用正则表达式,来去除两边的空格,只需以下代码
String.prototype.trim = function()
{
return this.replace(/(^\s*)|(\s*$)/g, “”);
}

一句就搞定了,
可见正则表达式为我们节省了相当的编写代码量

! 移动手机号的校验

如果采用传统的校验方式至少就要完成下面三步的校验,
(1). 是否是数字
(2).是否是11位
(3).数字的第三位是否是5,6,7,8,9
如果采用正则表达式校验,只需以下代码
function checkMobile1(form)
{
if (form.mobile.value > “”)
{
var reg=/13[5,6,7,8,9]\d{8}/;
if ( form.mobile.value.match(reg)== null)
{
alert(“请输入正确的移动手机号码!”);
form.mobile.focus(); return false;
 }
}
return true;
}

从上面的代码可以看出校验移动手机号只需定义一个var reg=/13[5,6,7,8,9]\d{8}/;模式匹配串就可以完成合法性校验了

! URL的校验,
条件:必须以http:// 或 https:// 开头, 端口号必须为在1-65535 之间, 以下代码完成了合法性校验

//obj:数据对象
//dispStr :失败提示内容显示字符串
function checkUrlValid( obj,  dispStr)
{
 if(obj  == null)
 {
  alert(“传入对象为空”);
  return false;
 }
 var str = obj.value;

 var  urlpatern0 = /^https :\/\/.+$/i;
 if(!urlpatern0.test(str))
 {
  alert(dispStr+”不合法:必须以’http:\/\/’或’https:\/\/’开头!”);
  obj.focus();
  return false;
 }

 var  urlpatern2= /^https :\/\/(([a-zA-Z0-9_-])+(\.) )*(:\d+) .+$/i;
 if(!urlpatern2.test(str))
 {
  alert(dispStr+”端口号必须为数字且应在1-65535之间!”);
  obj.focus();
  return false;
 }

 var urlpatern1 =/^https :\/\/(([a-zA-Z0-9_-])+(\.) )*(:\d+) (\/((\.) (\ ) = & [a-zA-Z0-9_-](\ ) )*)*$/i;

 if(!urlpatern1.test(str))
 {
  alert(dispStr+”不合法,请检查!”);
  obj.focus();
  return false;
 }

 var s = “0”;
 var t =0;
  var re = new RegExp(“:\\d+”,”ig”);
  while((arr = re.exec(str))!=null)
 {
  s = str.substring(RegExp.index+1,RegExp.lastIndex);

  if(s.substring(0,1)==”0″)
  {
   alert(dispStr+”端口号不能以0开头!”);
   obj.focus();
   return false;
  }

  t = parseInt(s);
  if(t<1 || t >65535)
  {
   alert(dispStr+”端口号必须为数字且应在1-65535之间!”);
   obj.focus();
   return false;
  }
 }
 return true;
}
 
对url的校验,看上去有很多的代码,这是因为要给予出错提示, 否则只需var urlpatern1 =/^https :\/\/(([a-zA-Z0-9_-])+(\.) )*(:\d+) (\/((\.) (\ ) = & [a-zA-Z0-9_-](\ ) )*)*$/i; 一句就可以校验出url合法性了

**********************************************************************************/

//校验是否全由数字组成
function isDigit(s)
{
var patrn=/^[0-9]{1,20}$/;
if (!patrn.exec(s)) return false
return true
}

//校验登录名:只能输入5-20个以字母开头、可带数字、“_”、“.”的字串
function isRegisterUserName(s)
{
var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
if (!patrn.exec(s)) return false
return true
}

//校验用户姓名:只能输入1-30个以字母开头的字串
function isTrueName(s)
{
var patrn=/^[a-zA-Z]{1,30}$/;
if (!patrn.exec(s)) return false
return true
}

//校验密码:只能输入6-20个字母、数字、下划线
function isPasswd(s)
{
var patrn=/^(\w){6,20}$/;
if (!patrn.exec(s)) return false
return true
}

//校验普通电话、传真号码:可以“+”开头,除数字外,可含有“-”
function isTel(s)
{
//var patrn=/^[+]{0,1}(\d){1,3}[ ] ([-] (\d){1,12})+$/;
var patrn=/^[+]{0,1}(\d){1,3}[ ] ([-] ((\d)|[ ]){1,12})+$/;
if (!patrn.exec(s)) return false
return true
}

//校验手机号码:必须以数字开头,除数字外,可含有“-”
function isMobil(s)
{
var patrn=/^[+]{0,1}(\d){1,3}[ ] ([-] ((\d)|[ ]){1,12})+$/;
if (!patrn.exec(s)) return false
return true
}

//校验邮政编码
function isPostalCode(s)
{
//var patrn=/^[a-zA-Z0-9]{3,12}$/;
var patrn=/^[a-zA-Z0-9 ]{3,12}$/;
if (!patrn.exec(s)) return false
return true
}

//校验搜索关键字
function isSearch(s)
{
var patrn=/^[^`~!@#$%^&*()+=|\\\][\]\{\}:;’\,.<>/ ]{1}[^`~!@$%^&()+=|\\\][\]\{\}:;’\,.<> ]{0,19}$/;
if (!patrn.exec(s)) return false
return true
}

function isIP(s) //by zergling
{
var patrn=/^[0-9.]{1,20}$/;
if (!patrn.exec(s)) return false
return true
}

<script type=”text/javascript”></script><script type=”text/javascript”></script>

正则表达式在javascript中的几个实例

正则表达式在javascript中的几个实例1(转)

去除字符串两端空格的处理

如果采用传统的方式,就要可能就要采用下面的方式了
//清除左边空格
function js_ltrim(deststr)
{
if(deststr==null)return “”;
var pos=0;
var retStr=new String(deststr);
if (retStr.lenght==0) return retStr;
while (retStr.substring(pos,pos+1)==” “) pos++;
retStr=retStr.substring(pos);
return(retStr);
}
//清除右边空格
function js_rtrim(deststr)
{
if(deststr==null)return “”;
var retStr=new String(deststr);
var pos=retStr.length;
if (pos==0) return retStr;
while (pos && retStr.substring(pos-1,pos)==” ” ) pos–;
retStr=retStr.substring(0,pos);
return(retStr);
}
//清除左边和右边空格
function js_trim(deststr)
{
if(deststr==null)return “”;
var retStr=new String(deststr);
var pos=retStr.length;
if (pos==0) return retStr;
retStr=js_ltrim(retStr);
retStr=js_rtrim(retStr);
return retStr;
}

采用正则表达式,来去除两边的空格,只需以下代码
String.prototype.trim = function()
{
return this.replace(/(^\s*)|(\s*$)/g, “”);
}

一句就搞定了,
可见正则表达式为我们节省了相当的编写代码量

! 移动手机号的校验

如果采用传统的校验方式至少就要完成下面三步的校验,
(1). 是否是数字
(2).是否是11位
(3).数字的第三位是否是5,6,7,8,9
如果采用正则表达式校验,只需以下代码
function checkMobile1(form)
{
if (form.mobile.value > “”)
{
var reg=/13[5,6,7,8,9]\d{8}/;
if ( form.mobile.value.match(reg)== null)
{
alert(“请输入正确的移动手机号码!”);
form.mobile.focus(); return false;
}
}
return true;
}

从上面的代码可以看出校验移动手机号只需定义一个var reg=/13[5,6,7,8,9]\d{8}/;模式匹配串就可以完成合法性校验了

! URL的校验,
条件:必须以http:// 或 https:// 开头, 端口号必须为在1-65535 之间, 以下代码完成了合法性校验

//obj:数据对象
//dispStr :失败提示内容显示字符串
function checkUrlValid( obj, dispStr)
{
if(obj == null)
{
alert(“传入对象为空”);
return false;
}
var str = obj.value;

var urlpatern0 = /^https :\/\/.+$/i;
if(!urlpatern0.test(str))
{
alert(dispStr+”不合法:必须以’http:\/\/’或’https:\/\/’开头!”);
obj.focus();
return false;
}

var urlpatern2= /^https :\/\/(([a-zA-Z0-9_-])+(\.) )*(:\d+) .+$/i;
if(!urlpatern2.test(str))
{
alert(dispStr+”端口号必须为数字且应在1-65535之间!”);
obj.focus();
return false;
}

varurlpatern1 =/^https :\/\/(([a-zA-Z0-9_-])+(\.) )*(:\d+) (\/((\.) (\ ) = & [a-zA-Z0-9_-](\ ) )*)*$/i;

if(!urlpatern1.test(str))
{
alert(dispStr+”不合法,请检查!”);
obj.focus();
return false;
}

var s = “0”;
var t =0;
var re = new RegExp(“:\\d+”,”ig”);
while((arr = re.exec(str))!=null)
{
s = str.substring(RegExp.index+1,RegExp.lastIndex);

if(s.substring(0,1)==”0″)
{
alert(dispStr+”端口号不能以0开头!”);
obj.focus();
return false;
}

t = parseInt(s);
if(t<1 || t >65535)
{
alert(dispStr+”端口号必须为数字且应在1-65535之间!”);
obj.focus();
return false;
}
}
return true;
}

对url的校验,看上去有很多的代码,这是因为要给予出错提示, 否则只需varurlpatern1 =/^https :\/\/(([a-zA-Z0-9_-])+(\.) )*(:\d+) (\/((\.) (\ ) = & [a-zA-Z0-9_-](\ ) )*)*$/i; 一句就可以校验出url合法性了

flexigridforjquery参数说明

$('#EmployeeGrid').flexigrid({    
    //表格寬度(注意在IE不能使用100%之類字串)    
     width:$(window).width()-2,    
    //表格高度(注意在IE不能使用100%之類字串)    
     height:480,    
    //資料列雙色交差    
     striped:true,    
    //欄位雙色交差    
     novstripe:false,    
    //最小寬度    
     minwidth:400,    
    //最小高度    
     minheight:200,    
    //是否可調整視窗大小    
     resizable:true,    
    //遠端伺服的網址    
     url:'server/employee.php',    
    //資料送出模式    
     method:'POST',    
    //回傳的資料類型    
     dataType:'xml',    
    //連結資料失敗時的訊息    
     errormsg:'連線資料庫失敗',    
    //啟用分頁器    
     usepager:true,    
    //不重疊    
     nowrap:true,    
    //預設的頁數    
     page:1,//当前页,但是该参数在初始化有效,在后期需要跳页时,需通过修改 newp 这个参数 


    //總頁數    
     total:1,//totalpages    
    //使用分頁大小選擇器    
     useRp:true,    
    //預設的分頁大小(筆數)    
     rp:15,//resultsperpage    
    //可選用的分頁大小    
     rpOptions:[10,15,20,25,40],    
    //標題    
     title:false,    
    //分頁器的顯示資訊    
     pagestat:'檢視{from}到{to},全部共有{total}筆資料',    
    //讀取時的訊息    
     procmsg:'資料讀取中,請稍後…',    
    //搜尋時送出附加自訂的query    
     query:'',    
    //搜尋自訂附加的欄位,請搜尋"//addsearchbutton"參考原始碼那段    
     qtype:'',    
    //空資料時的訊息    
     nomsg:'找不到符合絛件的資料',    
    //隱藏欄位數不得少於     
     minColToggle:1,    
    //顯示或關閉隱藏欄位的開啟器    
     showToggleBtn:true,    
    //預設排序的欄位    
     sortname:'basic_name',    
    //預設排序的方式    
     sortorder:'asc',    
    //送出時隱藏    
     hideOnSubmit:false,    
    //限定單選    
     singleSelect:true,    
    //不得調整視窗寬度    
     nohresize:true   
    //自動讀取資料    
     autoload:true,    
    //區塊透明    
     blockOpacity:0.5,    
    //顯示隱藏欄位時呼叫的自訂函式    
     onToggleCol:false,    
    //改變排序方式時呼叫的自訂函式    
     onChangeSort:false,    
    //執行成功後呼叫的自訂函式    
     onSuccess:false,    
    //資料送出時呼叫的自訂函式    
     onSubmit:false,    
    //錯誤時呼叫的自訂函式    
     onError:false,    
    //當分頁大小選擇器被選擇時呼叫自訂函式    
     onRpChange:false,    
    //是否顯示右上角縮小視窗的按鈕    
     showTableToggleBtn:true,    
    //定義欄位資訊(以下為範例)    
     colModel:[    
        //第一個欄位    
         {display:'身份證字號',    
          name:'basic_unicode',    
          width:75,    
          sortable:true,    
          align:'center',    
          hide:false},    
        //第二個欄位    
         {display:'姓名',    
          name:'basic_unicode',    
          width:75,    
          sortable:true,    
          align:'center',    
          hide:false}    
     ],    
    //自訂的參數(以下為範例)    
     params:[    
        //參數1(陣列型)    
         {name:'viewFields',value:['id','basic_unicode','basic_name']},    
        //參數2(單一型)    
         {name:'action',value:'view'}    
        /* 
         附註:另外以下為預設一定會送出去的物件參數,注意不要取同名 
         var param={ 
             page:p.newp, 
             rp:p.rp, 
             sortname:p.sortname, 
             sortorder:p.sortorder, 
             query:p.query, 
             qtype:p.qtype 
         }; 
         */   
     ],    
    //定義功能欄的按鈕資訊(以下為範例)    
     buttons:[    
         {name:'新增',bclass:'add',onpress:null},    
         {name:'刪除',bclass:'delete',onpress:null},    
         {separator:true}    
     ],    
    //定義搜尋欄位資訊(以下為範例)    
     searchitems:[    
         {display:'身份證字號',name:'basic_unicode'},    
         {display:'聯絡手機',name:'contact_mobile'},    
         {display:'姓名',name:'basic_name',isdefault:true}    
     ]    
});

 

jQueryLayermobile弹出层

layer mobile是为移动设备(手机、平板等webkit内核浏览器/webview)量身定做的弹层支撑,采用Native JavaScript编写,完全独立于PC版的layer,您需要按照场景选择使用。

  1. 无需依赖任何库,只加载layer.m.js即可

  2. 小巧玲珑,性能卓越、柔情似水…

  3. 具备无以伦比的自适应功能

  4. 灵活的皮肤自定义支撑,充分确保弹层风格多样化

  5. 丰富、科学的接口,让弹弹弹层无所不能

  6. 版本Layer mobile1.8

  7. 作者:闲心贤

  8. github

在线实例

实例预览 layer弹层组件移动版演示

实例预览 layer弹层组件移动版在线DEMO

参考手册

实例预览 layer弹层组件移动版API

引入文件

  1. <link href=“layer.css” type=“text/css” rel=“stylesheet”>
  2. <script src=“layer.js”>
复制

使用方法

  1. <a onclick=test(); href=“javascript:;”>点击询问框</a>
  2. <script>
  3. function test() {
  4. layer.open({
  5. content: ‘你是想确认呢,还是想取消呢?’,
  6. btn: [‘确认’, ‘取消’],
  7. shadeClose: false,
  8. yes: function() {
  9. layer.open({
  10. content: ‘你点了确认’,
  11. time: 1
  12. });
  13. },
  14. no: function() {
  15. layer.open({
  16. content: ‘你选择了取消’,
  17. time: 1
  18. });
  19. }
  20. });
  21. }
  22. </script>
复制