README

安装

git clone https://github.com/global-source/javascript_form_validator.git
git checkout -b [VERSION]

为什么选择我？

• 支持 原生 和 ES6 JavaScript，
• 纯 JavaScript 代码（无依赖），
• 简化实现，
• HTML 5 验证适用于所有浏览器，
• 可靠的动态级别 DOM 验证，
• 与元素动态自动滚动。

将验证器集成到表单的步骤

 <script src="formValidator.js"></script>
 or
 <script src="formValidator.es6.js"></script>

然后将您的表单与验证器集成。

    
    var myform = new jsValidator().init({
        form: 'form2submit',   // #id
    });
    

选项

操作

check() : 返回表单是否有效。

// Retrun status as True|False.
 myform.check() 

update() : 更新新创建的 DOM 元素到验证器。

 // It will update the DOM.
 myform.update() 

属性

当前验证将在提交按钮触发时触发。

它具有自动监听器，以监控表单上的每个更改。

注意

1. 验证发生在标签之间，因此需要指定表单或任何其他标签的 ID。
   。

   <form id="form2submit"> </form>  // Preferred
           
   <div id=form2submit> </div>      // Not-Preferred.

一般输入验证

1. 输入字段应指定验证类型。

   <form method="post" id="form2submit" novalidate>
    <div>
        <label>Only Alpha</label>
        <input type="text" data-allow="onlyAlpha" name="alpha"
               data-message="<b style='color:green'>This field is required.</b>" required>
    </div>
    <div>
        <label>String</label>
        <input type="text" data-allow="string" data-message="This also required." data-allowSpecial="+-" name="string"
               required>
    </div>
    <div>
        <label>Pattern</label>
        <input type="text" pattern="^[0-5]+$" data-allowSpecial="/-" name="pattern">
    </div>
    <div>
        <label>Number</label>
        <input type="number" name="number" required>
    </div>
    <div>
        <label>Min Validator</label>
        <input type="text" name="myNumber" min="5" max="10" required>
    </div>
    <div>
        <label>Email Validator</label>
        <input type="email" name="email" required>
    </div>
    <div>
         <label for="file">File</label>
         <input type="file" required class="form-control" id="file" data-extensions="png,jpeg,jpg" name="file">
    </div>
    <div>
        <label>Password</label>
        <input type="password" name="password" data-check="repassword" id="password" required>
    </div>
     <div>
        <label>Password</label>
        <input type="password" name="password" data-check="repassword" id="password" required>
    </div>
    <div>
        <label>List</label>
         <select name="list" required>
             <option value="item1">Item1</option>
             <option value="item2">Item2</option>
             <option value="item3">Item3</option>
         </select>
    </div>
    <div>
         <label>Description</label>
         <textarea required name="desc"></textarea>
    </div>
    <div>
        <input type="submit" value="Submit">
    </div>
</form>

1. 在表单中使用 novalidate 避免浏览器干扰。

        <form method="POST/GET/PUT/PATCH/DELETE" action="PATH-TO-HANDLE" id="form2submit" novalidate> 
        ...
        ...
        </form>

示例

 // For Native & ES6 Javascript.
 var myform = new jsValidator().init({
        form: 'form2submit',   // #id
        forceFilter: true,
         message: {
            required: 'This field is required !',
            min: '<br><span style="color: red;">This field is less then the limit</span>',
            max: 'This field is exceeds the limit',
            password: 'Password doesn\'t match !',
            email: 'Invalid Email found !',
            file: 'Invalid File format given'
        }
    });
    

它将自动监听 提交 事件并启动验证检查。根据响应，它将允许提交或显示消息。

许可证

版权（c）2016 Shankar Thiyagaraajan

MIT 许可证