<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<title>sample 1</title>
<style>
body { padding: 10px 0px 0px 0px; }
td
{
padding: 2px 5px;
text-align: left;
}
h4 { margin: 0px; }
input.editfield, select.editfield, textarea.editfield { width: 18em; }
</style>
</head>
<body>
<center>
<form method="post" action="sample1.php">
<input type="hidden" name="form_validation_rules" value="
username password year month day details : empty;
username password : len >= 3;
username password : chnum_;
e-mail: email;
membership : select 0;
year : > 1900;
year month day : date;
sex : radio;
details: len <= 20;
categories[] newsletters[] : cnt >= 2;
agree : terms;
" />
<input type="hidden" name="form_validation_behaviours" value="
details : count details_count 20 black red;
year : next 4;
month day : next 2;
month day : prev;
" />
<table>
<tr>
<td style="padding-bottom: 10px;" colspan="2"><h4>sample 1</h4></td>
</tr>
<tr>
<td>username:</td>
<td><input class="editfield" type="text" name="username" /></td>
</tr>
<tr>
<td>password:</td>
<td><input class="editfield" type="password" name="password" /></td>
</tr>
<tr>
<td>e-mail:</td>
<td><input class="editfield" type="text" name="e-mail" /></td>
</tr>
<tr>
<td>membership:</td>
<td>
<select class="editfield" name="membership">
<option value="0"></option>
<option value="1">silver</option>
<option value="2">gold</option>
<option value="3">platinum</option>
</select>
</td>
</tr>
<tr>
<td>age:</td>
<td>
<input type="text" name="year" size="4" maxlength="4" />
<input type="text" name="month" size="2" maxlength="2" />
<input type="text" name="day" size="2" maxlength="2" />
<small>yyyy/mm/dd</small>
</td>
</tr>
<tr>
<td>sex:</td>
<td>
<input type="radio" name="sex" value="male" /> male
<input type="radio" name="sex" value="female" /> female
</td>
</tr>
<tr>
<td>details:</td>
<td>
<textarea class="editfield" name="details" rows="4"></textarea>
<br />
<small><span id="details_count">0</span> out of 20 characters</small>
</td>
</tr>
<tr>
<td>categories:</td>
<td>
<select class="editfield" name="categories[]" multiple="multiple" size="4">
<option value="0">cars</option>
<option value="1">computers</option>
<option value="2">dogs</option>
<option value="3">food</option>
</select>
<br />
<small>use ctrl+mouse to select multiple categories</small>
</td>
</tr>
<tr>
<td>newsletters:</td>
<td>
<input type="checkbox" name="newsletters[]" value="0" /> cars <br />
<input type="checkbox" name="newsletters[]" value="1" /> computers <br />
<input type="checkbox" name="newsletters[]" value="2" /> dogs <br />
<input type="checkbox" name="newsletters[]" value="3" /> food
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" name="agree" />
<small>by checking this box you agree to some terms</small>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="submit" /></td>
</tr>
</table>
</form>
<script >
function display(x)
{
win = window.open();
for (var i in x) win.document.write(i+' = '+x[i]+'<br>');
}
// ***** data arrays ***********************************************************
// ***** options *****
var form_validation_options =
{
"override_enter" : true,
"override_bksp" : true
};
// ***** messages *****
var form_validation_alerts =
{
'>' : "%%name%% should be more than %%num%%!",
'<' : "%%name%% should be less than %%num%%!",
'>=' : "%%name%% should be more or equal to %%num%%!",
'<=' : "%%name%% should be less or equal to %%num%%!",
'ch' : "%%name%% contains invalid characters!",
'chnum_' : "%%name%% contains invalid characters!",
'cnt >' : "you should select more than %%num%% %%name%%!",
'cnt <' : "you should select less than %%num%% %%name%%!",
'cnt >=' : "you should select at least %%num%% %%name%%!",
'cnt <=' : "you should select at most %%num%% %%name%%!",
'cnt ==' : "you should select %%num%% %%name%%!",
'date' : "please, enter a valid %%name%%!",
'email' : "please, enter a valid e-mail address!",
'empty' : "please, enter %%name%%!",
'len >' : "%%name%% should contain more than %%num%% characters!",
'len <' : "%%name%% should contain less than %%num%% characters!",
'len >=' : "%%name%% should contain at least %%num%% characters!",
'len <=' : "%%name%% should contain at most %%num%% characters!",
'len ==' : "%%name%% should contain %%num%% characters!",
'num' : "%%name%% is not a valid number!",
'radio' : "please, select %%name%%!",
'select' : "please, select %%name%%!",
'terms' : "you must agree to the terms first!"
};
// ***** form field types *****
var form_validation_nonedit = ' button hidden reset submit ';
var form_validation_edit = ' checkbox file password radio select-multiple select-one text textarea ';
var form_validation_type = ' file password text textarea ';
var form_validation_check = ' checkbox radiox select-multiple select-one ';
// ***** alert *****************************************************************
function form_validation_alert(type, name, num)
{
name = name.replace(/^w*(w*)w*$/, "$1");
msg = form_validation_alerts[type];
msg = msg.replace('%%name%%', name.substr(0, 1).touppercase()+name.substr(1, name.length-1).tolowercase());
msg = msg.replace('%%name%%', name.tolowercase());
msg = msg.replace('%%num%%', num);
alert(msg);
return false;
}
// ***** behave ****************************************************************
function form_validation_behave(control, key, rules)
{
rules = form_validation_rules2array(rules);
for (var i = 0; i < rules.length; i++)
{
var rule = rules[i].split(/s*:s*/);
if (rule.length < 2) continue;
if (!form_validation_instring(' '+rule[0]+' ', control.name)) continue;
rule[1] = rule[1].split(/s+/);
switch (rule[1][0])
{
// ***** count *****
case 'count':
document.getelementbyid(rule[1][1]).innerhtml = control.value.length;
if (rule[1].length >= 5)
if (control.value.length < rule[1][2])
document.getelementbyid(rule[1][1]).style.color = rule[1][3];
else document.getelementbyid(rule[1][1]).style.color = rule[1][4];
break;
// ***** next *****
case 'next':
if (control.value.length == rule[1][1]) form_validation_focusnext(control);
break;
// ***** prev *****
case 'prev':
if (control.value.length == 0 && key == 8) form_validation_focusprev(control);
break;
}
}
return true;
}
// ***** getelement ************************************************************
function form_validation_getelement(tag, name)
{
for (var i = 0; i < tag.elements.length; i++)
if (tag.elements[i].name == name) return tag.elements[i];
return undefined;
}
// ***** instring **************************************************************
function form_validation_instring(str, val)
{
return str.indexof(' '+val+' ') >= 0;
}
// ***** focusnext *************************************************************
function form_validation_focusnext(tag)
{
for (var i = 0; i < tag.form.elements.length; i++)
if (tag.form.elements[i] == tag)
for (var j = i+1; j < tag.form.elements.length; j++)
if (form_validation_instring(form_validation_edit, tag.form.elements[j].type))
{
if (form_validation_instring(form_validation_type, tag.form.elements[j].type))
form_validation_setselection(tag.form.elements[j], 0, 0, 'frend');
else tag.form.elements[j].focus();
return false;
}
return true;
}
// ***** focusprev *************************************************************
function form_validation_focusprev(tag)
{
for (var i = 0; i < tag.form.elements.length; i++)
if (tag.form.elements[i] == tag)
for (var j = i-1; j >= 0; j--)
if (form_validation_instring(form_validation_edit, tag.form.elements[j].type))
{
if (form_validation_instring(form_validation_type, tag.form.elements[j].type))
form_validation_setselection(tag.form.elements[j], 0, 0, 'frend');
else tag.form.elements[j].focus();
return false;
}
return true;
}
// ***** initialize ************************************************************
function form_validation_initialize(control, rules)
{
rules = form_validation_rules2array(rules);
for (var i = 0; i < rules.length; i++)
{
var rule = rules[i].split(/s*:s*/);
if (rule.length < 2) continue;
if (!form_validation_instring(' '+rule[0]+' ', control.name)) continue;
rule[1] = rule[1].split(/s+/);
switch (rule[1][0])
{
// ***** count *****
case 'count':
document.getelementbyid(rule[1][1]).innerhtml = control.value.length;
if (rule[1].length >= 5)
if (control.value.length < rule[1][2])
document.getelementbyid(rule[1][1]).style.color = rule[1][3];
else document.getelementbyid(rule[1][1]).style.color = rule[1][4];
break;
}
}
return true;
}
// ***** onchange **************************************************************
function form_validation_onchange(e)
{
var ie = navigator.appname == "microsoft internet explorer";
var tag = ie ? window.event.srcelement : e.target;
return true;
}
// ***** onkeypress ************************************************************
function form_validation_onkeypress(e)
{
var ie = navigator.appname == "microsoft internet explorer";
var tag = ie ? window.event.srcelement : e.target;
var key = ie ? window.event.keycode : e.which;
if (form_validation_options['override_backspace'])
if (key == 8)
return form_validation_instring(form_validation_type, tag.type);
if (form_validation_options['override_enter'])
if (key == 13 && tag.type != 'textarea')
return form_validation_focusnext(tag);
return true;
}
// ***** onkeyup ***************************************************************
function form_validation_onkeyup(e)
{
var ie = navigator.appname == "microsoft internet explorer";
var tag = ie ? window.event.srcelement : e.target;
var key = ie ? window.event.keycode : e.which;
var behaviours = form_validation_getelement(tag.form, 'form_validation_behaviours');
if (behaviours !== undefined) form_validation_behave(tag, key, behaviours.value);
}
// ***** onsubmit **************************************************************
function form_validation_onsubmit(e)
{
var ie = navigator.appname == "microsoft internet explorer";
var tag = ie ? window.event.srcelement : e.target;
if (tag.tagname != 'form') tag = tag.form;
// ***** validate fields *****
var rules = form_validation_getelement(tag, 'form_validation_rules');
if (rules !== undefined)
for (var i = 0; i < tag.elements.length; i++)
if (!form_validation_validate(tag.elements[i], rules.value))
{
tag.elements[i].focus();
if (tag.elements[i].select !== undefined) tag.elements[i].select();
return false;
}
// ***** unset fields *****
for (var i = 0; i < tag.elements.length; i++)
{
if (tag.elements[i].name == 'form_validation_rules') tag.elements[i].value = '';
if (tag.elements[i].name == 'form_validation_behaviours') tag.elements[i].value = '';
}
return true;
}
// ***** register **************************************************************
function form_validation_register()
{
for (var i = 0; i < document.forms.length; i++)
with (document.forms[i])
{
var rules = form_validation_getelement(document.forms[i], 'form_validation_rules');
var behaviours = form_validation_getelement(document.forms[i], 'form_validation_behaviours');
if (rules === undefined && behaviours === undefined) continue;
onsubmit = form_validation_onsubmit;
for (var j = 0; j < elements.length; j++)
{
if (behaviours !== undefined) form_validation_initialize(elements[j], behaviours.value);
elements[j].onchange = form_validation_onchange;
elements[j].onkeypress = form_validation_onkeypress;
elements[j].onkeyup = form_validation_onkeyup;
}
}
}
// ***** rules2array ***********************************************************
function form_validation_rules2array(rules)
{
rules = rules.replace(/^(s*)(s.*)/, "$2");
rules = rules.replace(/(.*s)(s*)$/, "$1");
return rules.split(/s*;s*/);
}
// ***** setselection **********************************************************
function form_validation_setselection(control, start, end, mode)
{
if (control.focus) control.focus();
// ***** netscape *****
if (control.selectionstart !== undefined &&
control.selectionend !== undefined)
{
offset = control.selectionstart;
if (mode == 'frstart') offset = 0;
if (mode == 'frend') offset = control.textlength;
control.selectionstart = offset+start;
control.selectionend = offset+end;
return true;
}
// ***** ie *****
if (control.select !== undefined &&
document.selection !== undefined &&
document.selection.createrange !== undefined)
{
if (mode == 'frstart' || mode == 'frend') control.select();
range = document.selection.createrange();
if (mode == 'frstart') range.moveend ("character", -range.text.length);
if (mode == 'frend') range.movestart("character", range.text.length);
range.movestart("character", start);
range.moveend ("character", end);
range.select();
return true;
}
return false;
}
// ***** validate **************************************************************
function form_validation_validate(control, rules)
{
rules = form_validation_rules2array(rules);
for (var i = 0; i < rules.length; i++)
{
var rule = rules[i].split(/s*:s*/);
if (rule.length < 2) continue;
if (!form_validation_instring(' '+rule[0]+' ', control.name)) continue;
rule[1] = rule[1].split(/s+/);
switch (rule[1][0])
{
// ***** comparison *****
case '>':
if (control.value == '' || isnan(control.value))
return form_validation_alert('num', control.name, 0);
if (control.value <= rule[1][1])
return form_validation_alert('>', control.name, rule[1][1]);
break;
case '<':
if (control.value == '' || isnan(control.value))
return form_validation_alert('num', control.name, 0);
if (control.value >= rule[1][1])
return form_validation_alert('<', control.name, rule[1][1]);
break;
case '>=':
if (control.value == '' || isnan(control.value))
return form_validation_alert('num', control.name, 0);
if (control.value < rule[1][1])
return form_validation_alert('>=', control.name, rule[1][1]);
break;
case '<=':
if (control.value == '' || isnan(control.value))
return form_validation_alert('num', control.name, 0);
if (control.value > rule[1][1])
return form_validation_alert('<=', control.name, rule[1][1]);
break;
// ***** ch *****
case 'ch':
if (!/^([a-za-z]+)$/.test(control.value))
return form_validation_alert('ch', control.name, 0);
break;
// ***** chnum_ *****
case 'chnum_':
if (!/^(w+)$/.test(control.value))
return form_validation_alert('chnum_', control.name, 0);
break;
// ***** cnt *****
case 'cnt':
var cnt = 0;
if (control.type == 'select-multiple')
for (var k = 0; k < control.options.length; k++)
if (control.options[k].selected) cnt++;
if (control.type == 'checkbox')
with (control.form)
for (var k = 0; k < elements.length; k++)
if (elements[k].name == control.name && elements[k].checked) cnt++;
if (rule[1][1] == '>' && cnt <= rule[1][2])
return form_validation_alert('cnt >', control.name, rule[1][2]);
if (rule[1][1] == '<' && cnt >= rule[1][2])
return form_validation_alert('cnt <', control.name, rule[1][2]);
if (rule[1][1] == '>=' && cnt < rule[1][2])
return form_validation_alert('cnt >=', control.name, rule[1][2]);
if (rule[1][1] == '<=' && cnt > rule[1][2])
return form_validation_alert('cnt >=', control.name, rule[1][2]);
if (rule[1][1] == '==' && cnt != rule[1][2])
return form_validation_alert('cnt ==', control.name, rule[1][2]);
break;
// ***** date *****
case 'date':
rule[0] = rule[0].split(/s+/);
if (rule[0].length == 3)
{
var year;
var month;
var day;
with (control.form)
for (var k = 0; k < elements.length; k++)
{
if (elements[k].name == rule[0][0]) year = elements[k];
if (elements[k].name == rule[0][1]) month = elements[k];
if (elements[k].name == rule[0][2]) day = elements[k];
}
if (year !== undefined && month !== undefined && day !== undefined)
{
if (control == year)
if (year.value == '' || isnan(year.value))
return form_validation_alert('date', year.name, 0);
if (control == month)
if (month.value == '' || isnan(month.value) || month.value < 0 || month.value > 12)
return form_validation_alert('date', month.name, 0);
if (control == day)
{
if (day.value == '' || isnan(day.value) || day.value < 0 || day.value > 31)
return form_validation_alert('date', day.name, 0);
date = new date(year.value, month.value, day.value);
if (date.getdate() != day.value)
return form_validation_alert('date', day.name, 0);
}
}
}
break;
// ***** email *****
case 'email':
if (!/^(w+.)*(w+)@(w+.)+(w+)$/.test(control.value))
return form_validation_alert('email', control.name, 0);
break;
// ***** empty *****
case 'empty':
if (form_validation_instring(form_validation_type, control.type) && control.value == '')
return form_validation_alert('empty', control.name, 0);
break;
// ***** len *****
case 'len':
if (rule[1][1] == '>' && control.value.length <= rule[1][2])
return form_validation_alert('len >', control.name, rule[1][2]);
if (rule[1][1] == '<' && control.value.length >= rule[1][2])
return form_validation_alert('len <', control.name, rule[1][2]);
if (rule[1][1] == '>=' && control.value.length < rule[1][2])
return form_validation_alert('len >=', control.name, rule[1][2]);
if (rule[1][1] == '<=' && control.value.length > rule[1][2])
return form_validation_alert('len <=', control.name, rule[1][2]);
if (rule[1][1] == '==' && control.value.length != rule[1][2])
return form_validation_alert('len ==', control.name, rule[1][2]);
break;
// ***** num *****
case 'num':
if (control.value == '' || isnan(control.value))
return form_validation_alert('num', control.name, 0);
break;
// ***** radio *****
case 'radio':
var checked = false;
with (control.form)
for (var k = 0; k < elements.length; k++)
if (elements[k].name == control.name && elements[k].checked)
checked = true;
if (!checked) return form_validation_alert('radio', control.name, 0);
// ***** select *****
case 'select':
if (control.value == rule[1][1])
return form_validation_alert('select', control.name, 0);
break;
// ***** terms *****
case 'terms':
if (!control.checked)
return form_validation_alert('terms', control.name, 0);
break;
}
}
return true;
}
// ***** initialize forms ******************************************************
form_validation_register();
</script>
</center>
</body>
</html>
把下面代碼保存成php文件
$form_validation_alerts = array(
'>' => "%%name%% should be more than %%num%%!",
'<' => "%%name%% should be less than %%num%%!",
'>=' => "%%name%% should be more or equal to %%num%%!",
'<=' => "%%name%% should be less or equal to %%num%%!",
'ch' => "%%name%% contains invalid characters!",
'chnum_' => "%%name%% contains invalid characters!",
'cnt >' => "you should select more than %%num%% %%name%%!",
'cnt <' => "you should select less than %%num%% %%name%%!",
'cnt >=' => "you should select at least %%num%% %%name%%!",
'cnt <=' => "you should select at most %%num%% %%name%%!",
'cnt ==' => "you should select %%num%% %%name%%!",
'date' => "please, enter a valid %%name%%!",
'email' => "please, enter a valid e-mail address!",
'empty' => "please, enter %%name%%!",
'len >' => "%%name%% should contain more than %%num%% characters!",
'len <' => "%%name%% should contain less than %%num%% characters!",
'len >=' => "%%name%% should contain at least %%num%% characters!",
'len <=' => "%%name%% should contain at most %%num%% characters!",
'len ==' => "%%name%% should contain %%num%% characters!",
'num' => "%%name%% is not a valid number!",
'radio' => "please, select %%name%%!",
'select' => "please, select %%name%%!",
'terms' => "you must agree to the terms first!");
function form_validation_alert($type, $name, $num)
{
$name = preg_replace('/^w*(w*)w*$/', "$1", $name);
$msg = $globals['form_validation_alerts'][$type];
$msg = str_replace('%%name%%', strtoupper(substr($name, 0, 1)) . strtolower(substr($name, 1, strlen($name)-1)), $msg);
$msg = str_replace('%%name%%', strtolower($name), $msg);
$msg = str_replace('%%num%%', $num, $msg);
return $msg;
}
// ***** isnan *****************************************************************
function form_validation_isnan($value)
{
return (string)(integer)$value !== (string)$value;
}
// ***** validate **************************************************************
function form_validation_validate($data, $rules)
{
$rules = preg_replace('/^(s*)(s.*)/', "$2", $rules);
$rules = preg_split('/s*;s*/', $rules);
foreach ($rules as $i => $rule)
{
$rule = preg_split('/s*:s*/', $rule);
if (count($rule) < 2) continue;
$rule[0] = preg_split('/s+/', $rule[0]);
$rule[1] = preg_split('/s+/', $rule[1]);
foreach ($rule[0] as $j => $name)
{
$name = str_replace("[]", "", $name);
if (!in_array($rule[1][0], array('cnt', 'radio', 'terms')))
if (!isset($data[$name])) return 'invalid form!';
if (!in_array($rule[1][0], array('cnt')))
if ( isset($data[$name]) && is_array($data[$name])) return 'invalid form!';
switch ($rule[1][0])
{
// ***** comparison *****
case '>':
if (form_validation_isnan($data[$name]))
return form_validation_alert('num', $name, 0);
if ($data[$name] <= $rule[1][1])
return form_validation_alert('>', $name, $rule[1][1]);
break;
case '<':
if (form_validation_isnan($data[$name]))
return form_validation_alert('num', $name, 0);
if ($data[$name] >= $rule[1][1])
return form_validation_alert('<', $name, $rule[1][1]);
break;
case '>=':
if (form_validation_isnan($data[$name]))
return form_validation_alert('num', $name, 0);
if ($data[$name] < $rule[1][1])
return form_validation_alert('>=', $name, $rule[1][1]);
break;
case '<=':
if (form_validation_isnan($data[$name]))
return form_validation_alert('num', $name, 0);
if ($data[$name] > $rule[1][1])
return form_validation_alert('<=', $name, $rule[1][1]);
break;
// ***** ch *****
case 'ch':
if (!preg_match('/^([a-za-z]+)$/', $data[$name]))
return form_validation_alert('ch', $name, 0);
break;
// ***** chnum_ *****
case 'chnum_':
if (!preg_match('/^(w+)$/', $data[$name]))
return form_validation_alert('chnum_', $name, 0);
break;
// ***** cnt *****
case 'cnt':
$cnt = isset($data[$name]) ? (is_array($data[$name]) ? count($data[$name]) : 1) : 0;
if ($rule[1][1] == '>' && $cnt <= $rule[1][2])
return form_validation_alert('cnt >', $name, $rule[1][2]);
if ($rule[1][1] == '<' && $cnt >= $rule[1][2])
return form_validation_alert('cnt <', $name, $rule[1][2]);
if ($rule[1][1] == '>=' && $cnt < $rule[1][2])
return form_validation_alert('cnt >=', $name, $rule[1][2]);
if ($rule[1][1] == '<=' && $cnt > $rule[1][2])
return form_validation_alert('cnt <=', $name, $rule[1][2]);
break;
// ***** email *****
case 'email':
if (!preg_match('/^(w+.)*(w+)@(w+.)+(w+)$/', $data[$name]))
return form_validation_alert('email', $name, 0);
break;
// ***** empty *****
case 'empty':
if ($data[$name] == '')
return form_validation_alert('empty', $name, 0);
break;
// ***** len *****
case 'len':
if ($rule[1][1] == '>' && strlen($data[$name]) <= $rule[1][2])
return form_validation_alert('len >', $name, $rule[1][2]);
if ($rule[1][1] == '<' && strlen($data[$name]) >= $rule[1][2])
return form_validation_alert('len <', $name, $rule[1][2]);
if ($rule[1][1] == '>=' && strlen($data[$name]) < $rule[1][2])
return form_validation_alert('len >=', $name, $rule[1][2]);
if ($rule[1][1] == '<=' && strlen($data[$name]) > $rule[1][2])
return form_validation_alert('len <=', $name, $rule[1][2]);
break;
// ***** num *****
case 'num':
if (form_validation_isnan($data[$name]))
return form_validation_alert('num', $name, 0);
break;
// ***** radio *****
case 'radio':
if (!isset($data[$name]))
return form_validation_alert('radio', $name, 0);
break;
// ***** select *****
case 'select':
if (!isset($data[$name]))
return form_validation_alert('select', $name, 0);
break;
// ***** terms *****
case 'terms':
if (!isset($data[$name]))
return form_validation_alert('terms', $name, 0);
break;
}
}
// ***** date *****
if ($rule[1][0] == 'date')
{
$year = $rule[0][0];
$month = $rule[0][1];
$day = $rule[0][2];
if (form_validation_isnan($data[$year ]))
return form_validation_alert('date', $year, 0);
if (form_validation_isnan($data[$month]) || $data[$month] < 0 || $data[$month] > 12)
return form_validation_alert('date', $month, 0);
if (form_validation_isnan($data[$day ]) || $data[$day ] < 0 || $data[$day ] > 31 || !checkdate($data[$month], $data[$day], $data[$year]))
return form_validation_alert('date', $day, 0);
}
}
return true;
}