all in html is a big trap, so you rewrite it with js.

<!--propertys in "fields" are mapping input's name, so if you have some inputs are named test1 that they use a same rule-->
<!--"rule" can be String Array or Function-->
<!--when "rule" is String, only be assigned rule's name, such as "number|email", can't be assigned "required" and "failCss" etc.-->
<!--when "rule" is Array, the first item is RegExp, the second item is fail message-->
<!--when "rule" is Function, the function should return true or fail message, eg. function(val){return true || 'fail message'}-->
<!--"failCss"/"failHtml" can be assigned Array or String-->
<!--"failStyle" can be assigned Object or JSON-->
<input type="text" name="test1">
<script>
    new SMValidator('form', {
        fields: {
            test1: {
                rule: [/^[A-Z]*$/i, 'please entry letters'],
                required: 'please entry some thing',
                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>"],
            }
        }
    });
</script>
                

come back your boss's demand, four forms, one of number, one of email and two of letter.

<!--"failCss" and so on is called attributes-->
<!--attributes can move up as same as "fields", means share with all inputs. at this time, can be thought test2 is a rule without attribute-->
<!--"rules" is custom rule collection, the rule in "rules" can be Array or Function, like we mention above-->
<!--but when rule in "rules" is Function, we can pass params, eg.function(val, param1, ...){return true || 'fail message'}-->
<!--test2 can be assigned String/Array/Function not only Object-->
<!--when test2 is String, is same as data-rule-->
<!--when test2 is Array/Function is same as rule-->
<!--otherwise, attributes can be set false to disable it's action-->
<!--you can use SMValidator.config({...}) to set attributes, all instances of SMValidator are use the same attributes-->
<input type="text" name="test2">
<input type="text" name="test3">
<input type="text" name="test4">
<input type="text" name="test4">
<script>
    new SMValidator('form', {
        required: 'please entry some thing',
        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>"],
        rules: {
            onlyLetter: [/^[A-Z]*$/i, 'please entry letters']
        },
        fields: {
            test2: 'required|number',
            test3: 'required|email',
            test4: 'required|onlyLetter'
        }
    });
</script>
                

numbers:

email :

letters:

letters:

all attributes of SMValidator is the following
required,disinput,disblur,focus,manul,failHtml,passHtml,failStyle,failCss,passStyle,passCss,async,short

except "async" and "short", we have learned all attributes in tutor1. but attention that "required" and "async" is special, it's attribute and rule.

after finish above, your boss want to change the message about build-in rule. how to do that? let's to open tutor3