H5Validator

Example

Required

   <form>
      <input name="username" />
   </form>
   <script>
      var form=document.querySelector("form");
      var rules={
        username:{
            required:true,
        },
      };

      new H5Validator(form,rules,function submit(params){
        console.log(params);
        // ajax(url,params);
      });
   </script>

 <form>
   <div>Radio:</div>
   <div>
        <label>
            <input type="radio" name="r" value="one" />
            *Radio one
        </label>
    </div>
	<div>
        <label>
            <input type="radio" name="r" value="two" required />
            *Radio two
        </label>
    </div>

	<div>Checkbox:</div>
	<div>
		<label>
            <input type="checkbox" name="c" value="1" />
            Checkbox one
        </label>
	</div>
	<div>
		<label>
            <input type="checkbox" name="c" value="2" />Checkbox two
        </label>
	</div>
	<div>
  </form>

  <script>
      var form=document.querySelector("form");
      var rules={
        r:{
            require:true,
        },
        c:{
            required:{
                message:"Plase check",
            },
        },
      };

      new H5Validator(form,rules,function submit(params){
        console.log(params);
        // ajax(url,params);
      });
  </script>

Pattern

   <form>
      <input name="username" />
   </form>
   <script>
      var form=document.querySelector("form");

      var rules={
        username:{
            required:{
                message:"Plase input username",
            },
            pattern:/^.{4,}$/,
        },
      };

      new H5Validator(form,rules,function submit(params){
        console.log(params);
        // ajax(url,params);
      });
   </script>

   <form>
      <input name="username" />
   </form>
   <script>
      var form=document.querySelector("form");

      var rules={
        username:{
            required:{
                message:"Plase input username",
            },
            pattern:{
                value:/^.{4,}$/,
                message:"cannot be less than 4",
            },
        },
      };

      new H5Validator(form,rules,function submit(params){
        console.log(params);
        // ajax(url,params);
      });
   </script>

Len

   <form>
      <input name="username" />
   </form>
   <script>
      var form=document.querySelector("form");

      var rules={
        username:{
            required:{
                message:"Plase input username",
            },
            len:{
                type:"GE",
                value:4,
            },
        },
      };

      new H5Validator(form,rules,function submit(params){
        console.log(params);
        // ajax(url,params);
      });
   </script>

Compare

   <form>
      <p>
         *Password:
         <input type="password" name="pwd" />
      </p>
	  <p>
        *Verify password:
        <input type="password" name="vpwd" />
      </p>
   </form>
   <script>
      var form=document.querySelector("form");

      var rules={
        pwd:{
            required:true,
            len:{
                type:"GE",
                value:6,
                // message:"error message"
            },
        },
        vpwd:{
            required:true,
            compare:"pwd",
            /**
             * compare:{
             *   value:"pwd",
             *   message:"error message"
             * }
             */
        }
      };

      new H5Validator(form,rules,function submit(params){
        console.log(params);
        // ajax(url,params);
      });
   </script>

Validator

   <form>
      <p>
         Age:
         <input type="text" name="age" />
      </p>
   </form>
   <script>
      var form=document.querySelector("form");

      var rules={
        age:{
            validator(value){
                if(isNaN(value)){
                    return "error message";
                }
            },
        },       
      };

      new H5Validator(form,rules,function submit(params){
        console.log(params);
        // ajax(url,params);
      });
   </script>

Fomattor

   <form>
      <p>
         Age:
         <input type="text" name="age" />
      </p>
   </form>
   <script>
      var form=document.querySelector("form");

      var rules={
        age:{
            validator(value){
                if(isNaN(value)){
                    return "error message";
                }
            },
            // string to integer
            formatter(value){
                if(value){
                    return parseInt(value,10);
                }
                return 0;
            },
        },       
      };

      new H5Validator(form,rules,function submit(params){
        console.log(params); // {age:18}
        // ajax(url,params);
      });
   </script>

Used

Rules

interface IRules {
    [k: string]: {
        required?: boolean | {
            message: string;
        };
        pattern?: RegExp | {
            value: RegExp;
            message: string;
        };
        len?: number | {
            value: number;
            type?: "EQ" | "LT" | "GT" | "GE" | "LE" | "NE";
            message: string;
        };
        compare?: string | {
            value: string;
            message: string;
        };
        formattor?<T>(value: string): T;
        validator?(value: string, form: HTMLFormElement): null | string | undefined;
    };
}

Constructor

export default class H5Validator {
    constructor(
        form: HTMLFormElement, 
        rules: IRules, submit: (params: {
        [k: string]: any;
    }, form?: HTMLFormElement) => void);
    // error css class
    className: string; 
    // default messages
    defaultMessages: {
        required: string;
        selectRequired: string;
        len: string;
        selectLen: string;
        pattern: string;
        compare: string;
    };
    focus: boolean;
    preventDefault: boolean;
    onlyFirst: boolean;  // first or all
    
    showMessage(el: HTMLElement, message: string | null): void;
    showMessages(errors: IMesageItem[]): void;
}