long long ago, your boss asked you for validating a form, you write some lines below quickly

<input data-rule="required" type="text">
<script>
    new SMValidator('form');
</script>
                

but your boss don't like the message, so you change it like this

<input data-rule="required(please entry some thing)" type="text">
                

and then your boss require only letters

<!--RegExp in html-->
<input data-rule="/^[A-Z]*$/only capital letter" type="text">
                

<!--case-insensitive-->
<input data-rule="/^[A-Z]*$/i/please entry letters" type="text">
                

after checked your boss ask you, "where's the required?". so you join the two rule with "|".

<input data-rule="required(please entry some thing)|/^[A-Z]*$/only capital letter" type="text">
                

your boss link pink, he wants input's background turn to pink when validte fail. and then you use "failCss" to deal with.

<!--add className error to input-->
<input data-rule="required|failCss(error)" type="text">
                

<!--not enough,your boss want the pink apply to input's parent-->
<!--using "+" can apply style to input's parent, even apply to parent's parent by "++".-->
<input data-rule="required|failCss(error,+error)" type="text">
                

the next day, your boss change his mind, he say pink background too ugly, he only want input's word be purple. now "failStyle" comes on stage.

<!--"failStyle" only receive a param with JSON format, can't use "+" to affect input's parent-->
<input data-rule="/^[A-Z]*$/only capital letter|failStyle({'color':'#c3f'})" type="text">
                

your boss thought for a moment, he felt that also should have the style after success. "passCss" or "passStyle".

<input data-rule="/^[A-Z]*$/only capital letter|passCss(success)|passStyle({'color':'#090'})" type="text">
                

the fail message default in span.
but your boss didn't liked span, he want b. what to do? oh, here is "failHtml".

<!--put fail message into b-->
<input data-rule="required|failHtml(<b style='color:#f00'></b>)" type="text">
                

<!--then your boss said the message is too wordy,just a × icon is good, you have to use "!" to ignore the message-->
<input data-rule="required|failHtml(!<b style='color:#f00'>×</b>)" type="text">
                

<!--Avenue to Jane, you thought it's perfect. but your boss want to see the message and the icon now. what?-->
<!--"," can solve this issue, so easy.but you should pay attention to the writing order, 2333-->
<input data-rule="required|failHtml(<b style='color:#f00'></b>,!<b style='color:#f00'>×</b>)" type="text">
                

<!--just relax for a while, the boss's demand came.he want to add a dotted box outside input and the mesage outside the box.-->
<!--would you want to kill your boss? don't worry, remember "failCss"? we can use "+" to affect input's parent.-->
<input data-rule="required|failHtml(+<b style='color:#f00'></b>,!+<b style='color:#f00'>×</b>)" type="text">
                

<!--your boss changed his mind again, he require to put the dotted box on input and message inside the box-->
<!--get the box  by css selector and add a "*" in front of it avoid the box disappear-->
<!--when *!+ appear at the same time, must follow *!+++ such order-->
<input data-rule="required|failHtml(*.boss-ring)" type="text">
                

on the third day, it's a newday, it's a newlife and it's a newdemand.
your boss need a form that can only input numbers and valide on blur.

<!--"number" is a built-in rule,in addition there are email/range/length/equal-->
<!--"disinput" mean that no use oninput function-->
<input data-rule="number|disinput" type="text">
                

now your boss want to recover the style when editing.

<!--"focus" can make input recover original style on focus-->
<input data-rule="number|disinput|focus" type="text">
                

your boss war very happy, but he thought it is best to no validate on blur.

<!--you are confused, but did it-->
<input data-rule="number|disinput|disblur" type="text">
                

your boss was very angry and said you fool him, where's the number validation.
you had no choice but put a button beside input, validate on click.

<!--"manul" means validate by user, the equivalent of set "disinput" and "disblur"-->
<!--SMValidator.validate(inputs); inputs can be css selector or array which includes input object-->
<input id="manul" data-rule="number|manul" type="text">
<a href="javascript:SMValidator.validate('#manul');">check numbers</a>
                

in the end, the super demand.

• required and custom message
• only letters and case-insensitive
• word is purple, border is red and background is pink when fail
• word and border are green when success
• message is red and bold
• add × before message

<!--so you hold all of above together-->
<input data-rule="required(please entry some thing)|/^[A-Z]*$/i/please entry letters|failCss(error)|failStyle({'color':'#c3f','border':'1px solid #f00'})|passCss(success)|passStyle({'color':'#090'})|failHtml(<b style='color:#f00'></b>,!<b style='color:#f00'>×</b>)" type="text">
                

the fourth day, your boss give you four forms, one of number, one of email and two of letter, require in same style.
you saw the code you wrote yesterday, what the devil is a pile of all! so you hasten to open tutor2