2017-10-05 80 views
1

我是新来的Javascript和任何帮助,将不胜感激。呼叫Javascript验证功能从提交按钮

我收到一个错误说不是formValidation不是一个函数并在控制台中我看到以下内容: 的ReferenceError:要求没有定义 在投资组合/ JS /的script.js:12:23

以下是封装结构:

Portfolio 
    js 
    script.js 
    formValidation.js 
index.html 

我已经加入的script.js到我的html页面

<script src="js/script.js"></script> 

表Validation.js(其导出)

var FormValidation = function() { 

    var name = document.forms["contact"]["name"].value; 

    function nameValidation(name) { 

     if(name=="") { 
      alert("Enter name, required"); 
      return false; 
     }else if(name==[0-9]) { 
      alert("Only alphabets"); 
     } 

     return true; 
    } 

    nameValidation(name); 
}; 

module.exports = FormValidation; 

的script.js(主叫formValidation.js)

'use strict'; 

var FormValidation = require("./formValidation"); 

的index.html

<form name="contact" action="#" method="post" enctype="text/plain"> 
<input type="text" name="name" placeholder="NAME"></br> 
<input type="text" name="email" placeholder="EMAIL" required></br> 
<input type="text" name="phoneNumber" placeholder="PHONE-NUMBER"></br> 
<input type="text-box" name="message" placeholder="MESSAGE"></br> 
<button id="submit" class="btn btn-primary" type="submit" onclick="return FormValidation()"><i class="fa fa-paper-plane">Submit</i></button></br> 
    </form> 
</div> 
<script src="js/script.js"></script> 
</body> 
</html> 

谁能告诉我什么是错误?为什么我不能从onclick事件的html页面调用FormValidation()?

+1

你没装'require.js',所以没有功能'需要()'。 – Barmar

回答

0

你不能这样做需要这样的不一样browserify

一个工具,你将不得不像这样的另一个脚本添加到您的HTML文件。如果你使用的是node.js(后端),那么require就可以毫无问题地工作,但是在客户端你需要一个像browserify这样的工具。

这里是browserify少的解决方案:

<script src="js/formValidation.js"></script> 
+0

与webpack浏览器相同吗?所以我需要将它压缩在输出文件script.min.js中,以使我的上述程序工作?你建议的解决方案工作,谢谢。 – LifeStartsAtHelloWorld

+1

我认为它们是类似的工具,因为它们都将文件捆绑到其他文件中。但是Browserify似乎依赖于其他工具,如gulp/grunt来更有效地完成其任务,而webpack自己完成这项工作。 Webpack有点难以建立。 –